クロムエクステンションのブラウザアクションにポップアップを挿入してCSSを挿入/削除する

Question

クロムエクステンションのブラウズアクションポップアップウィンドウでcssを注入するか、注入されたCSSを削除する方法を尋ねます。私はいくつかの場所を見て、それを行う方法に理想的になるようにしようとしましたが、私はそれらを理解することができません。

"A browser action with a popup that changes the page color"と似た拡張機能を作成したいのですが、作成したCSSファイルをロードまたはアンロードするには、popup.htmlのdivをクリックしてください。

これは私の現在の仕事（https://github.com/Zhekoay/Self-Custom-Dark-Theme）コンテンツスクリプトを使用して挿入CSSを指示します。今私はそれを一度だけロードする代わりに異なる方法でロードまたはアンロードできるようにしたいと思います。

Answer 1

Chrome APIでは、manifest.json経由で注入されたCSSを削除できません。

demo extensionがないだけのようなコードを注入し、それに指しchrome.runtime.idに等しいidでdocument.documentElement下（存在する場合）を追加または削除しますあなたのコンテンツスクリプトの名前でfileパラメータlink要素を使用してhrefweb accessible CSSファイル。

1. manifest.jsonを
2. から"content_scripts"を削除
3. をクリックハンドラ内popup.js
4. にdivのクリックハンドラを追加manifest.jsonをする"web_accessible_resources": ["*.css"]を追加：chrome.tabs.executeScript({file: 'content.js'});

5. コンテンツを。 js：

   (function() { 
       var styleElement = document.getElementById(chrome.runtime.id); 
       if (styleElement) { 
       styleElement.remove(); 
       return; 
       } 
       var css = ({ 
       'www.youtube.com': 'app_yt_HoveredImg.css', 
       'www.messenger.com': 'fb_messenger_styles.css', 
       'www.google.com': 'google_styles.css', 
       'translate.google.com': 'google_styles.css', 
       'apis.google.com': 'google_styles.css', 
       })[location.hostname]; 
       if (!css) { 
       return; 
       } 
       styleElement = document.createElement('link'); 
       styleElement.id = chrome.runtime.id; 
       styleElement.rel = 'stylesheet'; 
       styleElement.href = chrome.runtime.getURL(css); 
       document.documentElement.appendChild(styleElement); 
   })(); 
   

注：このワークフローでは、"tabs"の代わりに"permissions": ["activeTab"]が必要です。利点は、拡張子のインストール時にactiveTabがアクセス権を要求しないことです。