如何动态修改Chrome扩展的清单文件css文件，或者打开/关闭样式表的正确方法是什么？ [英] How to dynamically modify the manifest file css file for Chrome Extension, or what is the correct way to toggle a stylesheet on/off?

问题描述

将我的） 。

如果您仍想继续开发此类扩展程序，可以使用以下方法，在我在上一个答案 ：

1. chrome.tabs.onUpdated - 检测标签状态变化（放置此代码位于您的 后台页面 中）：

     chrome.tabs.onUpdated.addListener（function（tabId，changeInfo，tab）{
    chrome.tabs.executeScript（tab。 id，{code：
   'document.documentElement.setAttribute（RWchooseStyle，style1.css）;'
   }）; 
    // myscript.js在https://stackoverflow.com/a/9647059中定义
    chrome.tabs.executeScript（tab.id，{file：'myscript.js'}）; 
   }）; 
     




2. localStorage - 对于持久性（以便可以在扩展中记住首选项）：
   
   localStorage.getItem（'name'）来检索首选项， localStorage.setItem（'name'，'value'）来设置首选项。

   
   
   

   只有字符串可以被记住，所以 string = JSON.stringify（some_variable） 和 original_variable = JSON.parse（string） 可用于保存数字，数组和其他基元。

Branching off my Other Question, a user successfully got me to serve a stylesheet but that is the wrong way; it is not what I needed to do.

So I have come up with a more accurate question:

Basically, you can make an extension permanently modify a web page by defining a content script in manifest.json.

I need the ability to, on the click of a button within popup.html, toggle a stylesheet on or off.

The answer to my other question I linked to, only allows my to serve a stylesheet, but that is removed again as soon as the page is reloaded.

I want to basically set the option for the extension to permenantly turn on a stylesheet for a web page, or to turn it off, by clicking the toggle button located in the browser icon popup.html.

See the screenshot:

---

---

I think what I need is for the button to change a setting in the extension which will either turn on or turn off a css stylesheet content script, or swap with a different css stylesheet content script.

I hope I have made this clear enough to understand.

解决方案

Why do you want to re-invent the wheel?

Have a look at Stylish for Chrome, a UserScript manager (originated from Stylish for Firefox).

If you still want to continue development of such an extension, the following methods can be used, on top of the one I described in my previous answer:

1. chrome.tabs.onUpdated - Detect tab state changes (place this code in your background page):

   chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
       chrome.tabs.executeScript(tab.id, {code:
          'document.documentElement.setAttribute("RWchooseStyle", "style1.css");'
       });
       // myscript.js defined in https://stackoverflow.com/a/9647059
       chrome.tabs.executeScript(tab.id, {file: 'myscript.js'});
   });
   

2. localStorage - For persistence (so that preferences can be "remembered" in your extension):
   localStorage.getItem('name') to retrieve preferences, localStorage.setItem('name','value') to set preferences.

   Only strings can be remembered, so string = JSON.stringify(some_variable) and original_variable = JSON.parse(string) can be used in order to save numbers, arrays and other primitives.

这篇关于如何动态修改Chrome扩展的清单文件css文件，或者打开/关闭样式表的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！