Twitterを開いた時に「フォロー中」タブを自動クリックする拡張機能を作った

{
  "name": "Twitter Autoselect Following Tab",
  "description": "when open https://twitter.com/home ,select following tab automatically ",
  "version": "0.2",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": [
        "https://twitter.com/home"
      ],
      "js": [
        "content_script.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}

window.addEventListener("load", main, false);

function main() {
  const jsInitCheckTimer = setInterval(jsLoaded, 1000);
  function jsLoaded() {
    if (document.querySelector('[role="tab"]') != null) {
      clearInterval(jsInitCheckTimer);
      autoSelectFollowing();
    };
  }
}

function autoSelectFollowing() {
  const tabs = document.querySelectorAll('[role="tab"]');
  tabs[1].click();
};

// 監視対象の要素を取得。特定の要素に絞らずに"document"とかでもいい。
const elementToObserve = document.querySelector("#targetElementId");

// 新規MutationObserverオブジェクトを作成して、コールバック関数を設定する
const observer = new MutationObserver(function() {
    console.log('callback that runs when observer is triggered');
});

// 監視対象の要素とオプションで監視対象にするものを設定する
observer.observe(elementToObserve, { attributes: true,subtree: true, childList: true });

//アトリビュートフィルターの使い方
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

function callback(mutationList) {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
      case "attributes":
        switch(mutation.attributeName) {
          case "status":
            userStatusChanged(mutation.target.username, mutation.target.status);
            break;
          case "username":
            usernameChanged(mutation.oldValue, mutation.target.username);
            break;
        }
        break;
    }
  });
}

const userListElement = document.querySelector("#userlist");

const observer = new MutationObserver(callback);
observer.observe(userListElement, {
  attributeFilter: [ "status", "username" ],
  attributeOldValue: true,
  subtree: true
});

console.log("Twitter auto select following tab script launched");

let oldLocationPath = "";

function main() {
  if (oldLocationPath === "/home") return;
  oldLocationPath = "/home";
  const jsInitCheckTimer = setInterval(jsLoaded, 1000);
  function jsLoaded() {
    if (document.querySelector('[role="tab"]') != null) {
      clearInterval(jsInitCheckTimer);
      autoSelectFollowing();
    };
  }
}

function autoSelectFollowing() {
  const tabs = document.querySelectorAll('[role="tab"]');
  if (tabs[1].getAttribute("aria-selected")) {
    tabs[1].click();
    console.log("following selected.");
  }

};


const config = {
  attributes: true,
  childList: true,
  subtree: true,
  // attributeFilter:[location]   did not work
};

const callback = function (mutationsList, observer) {
  console.log("DOM Changed. check if url is twitter.com/home: " + location.pathname);
  if (location.pathname === "/home") {
    main();
  } else {
    oldLocationPath = location.pathname;
  };
};

const observer = new MutationObserver(callback);
observer.observe(document, config);

{
  "name": "Twitter Autoselect Following tab",
  "description": "when open https://twitter.com/home ,select following tab automatically ",
  "version": "0.4",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": [
        "https://twitter.com/*"
      ],
      "js": [
        "content_script.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}