Twitterのテーマ

クロム拡張機能は素晴らしいです.
そして、Twitterは素晴らしいです.
しかし、私は本当にTwitterのUIが好きではなかった.私はいつもそれは少し混乱し、読みにくいことがわかりました.
私は常にクロムの拡張子を構築したかったので、私は右にジャンプし、Twitterのテーマ拡張を構築することを決めた!
それに入りましょう.
(ああ、あなたはhttps://get-glitter.netlify.app )

機能性
私がそれをしたかった主なことは、Twitterのテーマをカスタマイズすることでした.
複雑さを避けるためにoverride.css ファイルNavbar、カードなどのようなものにいくつかのカスタムスタイルを追加します.
Twitterが動的に生成されたクラス名を使っているので、ちょっとタフだったので、ネストしたCSSセレクタを使わなければなりませんでした.
例えば、かなり大きな単一の要素セレクタです.

[aria-labelledby='modal-header']
> div:first-child
> div:first-child
> div:nth-child(2)
> div:first-child
> div:first-child
> div:first-child
> div:first-child
> div:nth-child(3)
[role='button']:hover {
    cursor: pointer  !important;
    background-color: var(--primarycolor) !important;
    filter: brightness(1.2) !important;
    color: var(--buttontextcolor) !important;
}

これは私が望んでいなかったスタイルを偶然オーバーライドしていたので、これは最長の部分だった.
とにかく、私はCSS変数に基づいたいくつかのテーマを思いつきました.基本的なテーマは次のようになります.

{
    name:  'theme-light',
    title:  'Default',
    category:  'Light',
    primarycolor:  '#1DA1F2',
    backgroundcolor:  '#f1f1f1',
    hovercolor:  '#f7f7f7',
    cardbackground:  '#ffffff',
    accentcolor:  '#f1f1f1',
    bordercolor:  '#bbbbbb',
    textcolor:  '#222222',
    cardborderradius:  '8px',
    cardbordercolor:  '#000000',
    cardborderwidth:  '0',
    cardshadow:
'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',
    buttonborderradius:  '6px',
    buttontextcolor:  '#ffffff',
    inputtextcolor:  '#111111',
    inputbackground:  '#ffffff',
}

私は、明白な色、背景などを含みました;しかし、私はカテゴリーとテーマ名も含めました.これは、私が後にカテゴリーによって別々のテーマを缶詰にすることができたことを確認することでした.

テーマの保存
これの最も重要な部分は、テーマを保存することができたことでした.
これをするためにloadThemes.js ファイルは、それぞれのテーマを通してループする単純なスクリプトでしたthemes 配列とそのテーマでTwitterのクッキーを設定します.

themes.forEach((theme) => {
  chrome.cookies.get(
  { url:  'https://twitter.com', name:  theme.name },
  function (cookie) {
    if (
      cookie &&
      cookie.value &&
      cookie.value !== '{}' &&
      cookie.value !== '' &&
      JSON.parse(cookie.value) !== {}
    ) {
    } else {
      chrome.cookies.set(
        {
          url:  'https://twitter.com',
          name:  theme.name,
          value:  JSON.stringify(theme),
          expirationDate:  new  Date().getTime() + 10 * 365 * 24 * 60 * 60,
        },
          function () {},
        );
        window.location.reload();
      }
    },
  );
});

今、私は彼らにテーマをいくつかクッキーを持っていました.

スイッチングテーマ
テーマを切り替えるためのUIを構築した後、私は実際にテーマの切り替えを実装する必要がありました.
これを行うには、UIの各テーマにClickイベントリスナーを追加しました.
私は次にアクセスid その要素の属性は、テーマクッキー名と同じです.
私はクッキーにアクセスするためにそれを使用して、Twitter上でCSSカスタムプロパティを更新する機能を呼び出します.

themePreset.addEventListener("click", (e) => {
  changeTheme(e.target.id);
})

The changeTheme 関数はかなり大きいですが、ここでは基本的な考え方です.

テーマ名を受け入れる

クッキー名を取得するthemeName パラメータ

クッキーをパースしてtheme オブジェクト

用途chrome.tabs.getSelected Twitterのいくつかのコードを実行するには

ここでは、Twitterに渡されたコードを実行(省略)します.

document.documentElement.style.setProperty(
    '--primarycolor',
    '${newTheme.primarycolor}',
);
document.documentElement.style.setProperty(
    '--backgroundcolor',
    '${newTheme.backgroundcolor}',
);

私はその後chrome.tabs.executeScript(tab.id, { code: code }); スクリプトを実行するには、CSSのカスタムプロパティが変更されました.
Twitterは別の今ルックス!🎉

カスタムテーマの追加
私は少しこの時点で持ち運び、カスタムテーマを追加し、能力を編集することを決めた.
一見したところ、それは滑稽で冷静だった.
とにかく、私は単にクッキーにテーマデータを格納している各々のクッキーで、より多くのクッキーを加えることによってそれをしました.
エクステンションがロードされるたびに、テーマクッキーにアクセスし、新しい要素を作成したので、作成したテーマを切り替えることができました.

拡張機能を使う
これまで読んでくれてありがとう!で拡張子を見つけることができますhttps://get-glitter.netlify.app .
私はあなたが何を考えるか知ってみよう!
あなたが望むならば、あなたはこれのようなより涼しいもののために私に続くことができます!