对于Google Chrome扩展程序，如何在Popup中定义样式表切换？ [英] For a Google Chrome extension, how do I define a stylesheet toggle within the Popup?

问题描述

当用户点击扩展程序的浏览器图标时，会弹出已定义的弹出窗口。

我需要创建一个切换按钮来打开/关闭特定页面/域的样式表，当用户点击 >弹出窗口。

例如，当用户使用Adblock扩展程序时，当用户单击浏览器图标时，会弹出一个弹出窗口，其中包含一系列链接。其中一个链接是不要在此页面上运行，然后更改为启用，用户可以点击该链接重新启用它。

另一个示例（更好的例子）：经典弹出窗口阻止程序在弹出窗口中有一个按钮，指出将此页面添加到黑名单，并且一旦单击更改为从黑名单中移除。

传统的弹出式窗口拦截器通常是我想要的扩展功能（它不会对广告或弹出窗口进行任何操作，这仅仅是一个例子），所以当用户单击弹出式窗口上的按钮，它会打开或关闭我已写入并保存为扩展名中的.css文件的样式表。

我希望我已经制作了这足以让人明白。

---

屏幕

是我制作的一张photoshop图片，以便您可以确切地看到我正在尝试执行的操作：

---

再次photoshop，查看一次应该发生的事情你点击按钮：

---

解决方案

您可以使用 chrome.tabs.executeScript 方法来动态注入/移除CSS （需要 manifest.json 中的标签权限）：

  chrome.tabs.executeScript（null，{code：$ b $'document.documentElement.setAttribute（RWchooseStyle，style1.css）;'
} ，功能on（）{
 chrome.tabs.executeScript（null，{file：'myscript.js'}）; 
}）; 
  

在 myscript.js 中，检测您是否已经插入了CSS。如果没有，添加一个新的< style> 或 link 元素，并分配一个 id 就可以了。

myscript.js 的示例： p>

  var selectedStyle = document.documentElement.getAttribute（'RWchooseStyle'）; 
 var id，link; 
 if（selectedStyle）{
 id ='RW_style_'+ selectedStyle.replace（/ \W / g，''）; //清理ID 
 //删除上一张表（如果可用）。 
 link = document.getElementById（id）; 
 if（link）{
 link.parentNode.removeChild（link）; 
 
 
 if（id）{
 //插入新工作表
 link = document.createElement（'link'）; 
 link.rel ='stylesheet'; 
 link.type ='text / css'; 
 link.href = chrome.extension.getURL（selectedStyle）; 
 link.id = id; 
（document.head || document.documentElement）.appendChild（link）; 
} 
 
 //删除临时属性
 document.documentElement.removeAttribute（'RWChooseStyle'）; 
  

在这个例子中，CSS文件必须在扩展目录中定义。当然，如果< link> ，您也可以使用< style> ，并动态设置样式的内容。注意：不要忘记将样式表添加到 html＃web_accessible_resourcesrel =nofollow> web_accessible_resources 部分清单文件。

When a user clicks on the browser icon for the extension, it brings up the Popup that has been defined.

I need to create a toggle button to turn on/off a stylesheet for a specific page/domain when a user clicks a button that is within the popup.

For example, when a user uses the Adblock extension, when the user clicks the browser icon, it brings up the popup, which has a series of links. One such link is "don't run on this page", which then changes to "enable" which the user can click to turn it back on.

Another example (much better example): Classic Popup blocker has a button on the popup that says "add this page to blacklist" and once clicked changes to "remove from blacklist".

The classic popup blocker is generally the functionality I want for my extension (it's not doing anything with ads or popup blocking, that was just an example), so that when a user clicks the button on the popup it will turn a stylesheet on or off that I have written and saved as a .css file in the extension.

I hope I have made this clear enough to understand.

---

SCREENS

Here is a photoshopped picture that I made so that you can see exactly what I am trying to do:

---

and photoshopped again to see what should happen once you click the buttons:

---

解决方案

You can use the chrome.tabs.executeScript method to dynamically inject/remove CSS (requires the tabs permission in manifest.json):

chrome.tabs.executeScript(null, {code:
    'document.documentElement.setAttribute("RWchooseStyle", "style1.css");'
}, function() {
    chrome.tabs.executeScript(null, {file: 'myscript.js'});
});

In myscript.js, detect whether you have already inserted CSS. If not, add a new <style> or link element, and assign an id to it. Otherwise, replace the style sheet.

Example of myscript.js:

var selectedStyle = document.documentElement.getAttribute('RWchooseStyle');
var id, link;
if (selectedStyle) {
    id = 'RW_style_' + selectedStyle.replace(/\W/g,'');   // Sanitize id
    // Remove previous sheet, if available.
    link = document.getElementById(id);
    if (link) {
        link.parentNode.removeChild(link);
    }
}
if (id) {
    // Insert new sheet
    link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = chrome.extension.getURL(selectedStyle);
    link.id = id;
    (document.head||document.documentElement).appendChild(link);
}

// Remove temporary attribute
document.documentElement.removeAttribute('RWChooseStyle');

In this example, the CSS files have to be defined in your extensions directory. Of course, you can also use <style> instead if <link>, and dynamically set the style's content.

Note: Do not forget to add the style sheet to the web_accessible_resources section of the manifest file.

这篇关于对于Google Chrome扩展程序，如何在Popup中定义样式表切换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！