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

问题描述

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

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.

例如，当用户使用 Adblock 扩展程序时，当用户单击浏览器图标时，它会弹出包含一系列链接的弹出窗口.一个这样的链接是不要在这个页面上运行"，然后它会变成启用"，用户可以点击它来重新打开它.

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".

经典的弹出窗口拦截器通常是我想要的扩展功能(它不会对广告或弹出窗口拦截做任何事情，这只是一个例子)，所以当用户点击弹出窗口上的按钮时，它会变成一个样式表打开或关闭我在扩展程序中编写并保存为 .css 文件.

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.

屏幕

这是我制作的经过 Photoshop 处理的图片，以便您可以准确地看到我想要做什么:

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

然后再次进行photoshop，看看单击按钮后会发生什么:

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

推荐答案

你可以使用 chrome.tabs.executeScript 方法动态注入/删除 CSS(需要 manifest.json 中的 tabs 权限):

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'});
});

在myscript.js中，检测是否已经插入了CSS.如果没有，添加一个新的 <style> 或 link 元素，并为其分配一个 id.否则，替换样式表.

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.

示例:

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');

在本例中，CSS 文件必须在您的扩展目录中定义.当然你也可以用<style>代替<link>，动态设置style的内容.

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.

注意:不要忘记将样式表添加到 清单文件的 web_accessible_resources 部分.

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