Question

我一直在尝试构建Chrome扩展程序，不幸的是，当它最终使其正常工作时，我意识到我必须使其仅在某些网址上有效，这很好，因为Chrome同时具有exclude_matches和{ {1}}为此。但是，当将这两个选项与CSS结合使用时，Chrome中存在一个错误 - 它不起作用。

我想知道是否有人知道我只能在某些域上注入我的CSS（我想从一对夫妇中排除而不是允许很多）？我知道我可以使用Javascript将它写到现有CSS的末尾但不幸的是，这让我在CSS显示的内容上有了第二个延迟（而且它也非常明显）。

如果有人想出一些替代方案，我将不胜感激。也许有一些方法可以通过Javascript使用CSS文件，这不会影响性能（请注意，Javascript中不需要域排除，因为exclude_globs可以正常使用JS文件）。任何和所有想法都有帮助，只是遗憾谷歌没有修复已经存在超过一年的错误！

编辑：由于我认为我会得到一两个关于程序化注入的回复，我不清楚这是如何工作的，所以作为一个例子，我们将使用这些链接（后者是一个我不想实现CSS的人，以防任何人想发布一个例子。

exclude_matches

哦，我知道谷歌的例子是使用按钮来启动CSS，但我宁愿让它从页面加载开始。再次感谢！

Answer 1

在解决this bug之前，请在all matching URL's中列出manifest或使用insertCSS API作为解决方法。

代码示例＃1

只要点击浏览器操作图标，此示例就会将css注入当前标签，确保您的清单中没有default_popup，否则onClicked event将无法触发。

//This even fires when ever a browser action is clicked
chrome.browserAction.onClicked.addListener(function (tab) {
    // This injects content.css into the current tab
    chrome.tabs.insertCSS(null, {
        file: {
            file: "content.css"
        },
        "all_frames": true //for all frames
    });
});

代码示例＃2

利用任何tab API's过滤匹配的一组页面来注入CSS

tabs.onCreated.addListener（用于在tab is created时注入CSS）
tabs.onUpdated.addListener（用于在tab is completely loaded时注入CSS）
tabs.query（用于将CSS注入existing tabs）

选择任何API并注入CSS

//Use an API to filter pages for a matching List
chrome.tabs.(SOME API HERE).addListener(function (RELATED DEFINITION) {
    //Inject CSS for a tab
    chrome.tabs.insertCSS(tabId, {
        file: {
            file: "content.css"
        }, //Any file to inject
        "all_frames": true //Inject to all Frames
    });
});

有关更多信息，请参阅this。

不使用exclude_matches / globs排除Chrome扩展程序中的域名或提高Javascript CSS效果？

1 个答案:

代码示例＃1

代码示例＃2

参考