2

私はこの他の質問を見つけましたが、どのような種類の答えはありませんか。私はかなり同じことをしたいです。

しかし、ページのリロード時にスタイルシートが元に戻され、何も変更されないため、その質問に対する答えはスタイルシートを永続的に変更するわけではありません。

Google Chrome 拡張機能の場合、ポップアップ内でスタイルシート トグルを定義するにはどうすればよいですか?

ユーザーが拡張機能のブラウザー アイコンをクリックすると、定義されているポップアップが表示されます。

ユーザーがポップアップ内のボタンをクリックしたときに、特定のページ/ドメインのスタイルシートをオン/オフするトグル ボタンを作成する必要があります。

たとえば、ユーザーが Adblock 拡張機能を使用している場合、ユーザーがブラウザー アイコンをクリックすると、一連のリンクを含むポップアップが表示されます。そのようなリンクの 1 つは「このページでは実行しない」であり、ユーザーがクリックしてオンに戻すことができる「有効」に変わります。

別の例 (より良い例): 従来のポップアップ ブロッカーには、ポップアップに「このページをブラックリストに追加する」というボタンがあり、クリックすると「ブラックリストから削除する」に変更されます。

image1 i.stack.imgur.com/92gVx.jpg

image2 i.stack.imgur.com/Xvyyp.jpg

これが私が現在HTMLファイルに持っているものです。このようにして、単純なチェックボックスがあり、チェックされている場合は JavaScript が実行されます。

<script type="text/javascript">
  $("#button").click(function(){
    chrome.extension.sendRequest({ msg: "toggle" });
    });
</script>
<input type="checkbox" checked="checked" id="button" /> TOGGLE IT
4

1 に答える 1

2

ユーザーの操作に基づいて注入する代わりに、ある種のトグルに基づいて注入することができます。イベントのリスナーを追加し、chrome.tabs.onUpdated影響を受ける Web サイトをフィルターしてから、トグルが true に設定されている場合は css を挿入します。例えば：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
  //assuming `cssToggle` is defined
  if(tab.url && cssToggle == "true"){
    // assuming `url` is the url you want to change
    if(tab.url.indexOf(url) >-1)
      chrome.tabs.insertCSS(tabId, {file:"style.css", runAt: "document_start"});
  }
});

オプション ページを使用してスタイルシートを切り替える例:

マニフェスト.json

"options_page": "options.html",

options.html

<script src="options.js"></script>
[...]
<select id="cssSelect">
  <option value="true">Enabled</option>
  <option value="false">Disabled</option>
</select>

options.js

$('#cssSelect').change(function(){
  chrome.runtime.sendMessage({method: 'setCSS', css:$(this).val()});
});

background.js

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
  if(message.method == 'setCSS')
    cssToggle = message.css;
});

jQueryを許してください。それは私が使用しているものであり、純粋なJSに変換して間違ったコードを提供したくありません。そのため、マニフェストでオプション ページを定義し、そのオプション ページで有効/無効オプションを選択します。変更されたら、新しい値をバックグラウンド ページに送信し、cssToggleそれに応じて var を更新します。文字列に対してテストしていることに注意してください。これは、メッセージで送信したものであり、コードが少なくなるためです。

複数のスタイルの切り替えがある限り。数が少ない場合は、これの倍数を使用できますが、それ以上の場合は、少し異なることをお勧めします。次のように、URL、トグル、および挿入するファイルを含むオブジェクトの配列として定義する場合があります。

[{url:url1,toggle:toggle1,file:file1},{url:url2, toggle:toggle2, file:file2},...]
于 2013-04-21T06:56:11.097 に答える