javascript - Chrome 扩展中的 CSS 注入(inject)期间闪烁

Question

我有一个插件可以通过注入(inject) CSS 文件来完全改变网站的外观。它可以工作，但在新外观出现之前的一瞬间，旧外观就在那里，因此每次加载页面时都会导致“闪烁”。新外观改变了背景颜色等，因此开关非常明显。 (我只在我的台式机上注意到这一点，而不是在我的笔记本电脑上。我不知道为什么，但其他用户也报告了它，也许更快的计算机使页面显示速度比注入(inject) CSS 所需的速度更快？)。需要进行 CSS 注入(inject)，因此注入(inject)的 CSS 是最重要的(如上)。

我尝试过导致此问题的原因(之后的代码):

1. list :确保 css 位于 web_accessible_resources
2. list :直接在 content_scripts 中进行注入(inject)
3. list :通过从 content_scripts
运行的 javascrip 来实现
4. list :确保所有内容脚本都在 document_start 上运行
5. list :尝试从后台页面上运行的脚本运行注入(inject)
6. JS 注入(inject)计时:为 DOMSubtreeModified 添加了事件监听器
7. JS 注入(inject)计时:为 chrome.webNavigation.onCommitted 添加了事件监听器
8. JS 注入(inject)时机:WAITING document.head/document.body
9. JS 注入(inject)方法:appendChild
10. JS 注入(inject)方法:chrome.tabs.executeScript()
11. JS 注入(inject)代码:链接元素链接到扩展中的 css 文件
12. JS注入(inject)代码:直接执行javascript

代码示例:

list :

{
  "manifest_version": 2,
  "name": "foo",
  "short_name": "bar",
  "description": "baz",
  "options_page": "options.html",
  "version": "2.1.1",
  "homepage_url": "http://google.com/",
  "permissions": ["storage", "*://google.com/*", "webNavigation", "tabs", "activeTab"],
  "browser_action": {
    "default_icon": "icon16.png",
    "default_title": "title",
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["*://google.com/*"],
      "js": ["carbonicEditionScript.js"],
      "all_frames": true,
      "run_at": "document_start"
    }
  ],
  "background": {
    "page": "popup.html"
  },
  "web_accessible_resources": ["carbonicEditionStyle.css"]
}

carbonicEditionScript.js

document.addEventListener('DOMSubtreeModified', injectStyle, false);
function injectStyle(){
    document.removeEventListener('DOMSubtreeModified', injectStyle, false);
    var style = document.createElement('style');
    style.setAttribute("id", "CarbonicEditionStyle");
    style.setAttribute("class", "CarbonicEditionStyle");
    style.setAttribute("type", "text/css");
    style.appendChild(document.createTextNode(css));
    document.getElementsByTagName("html")[0].appendChild(style);
}

carbonicEditionScript替代.js

document.addEventListener('DOMSubtreeModified', injectCSS, false);
function injectCSS(){
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('carbonicEditionStyle.css');
if(document.head){
  document.removeEventListener('DOMSubtreeModified', injectCSS, false);
  (document.head||document.documentElement).appendChild(style);
}}

背景.js

chrome.webNavigation.onCommitted.addListener(function(o) {
  chrome.tabs.executeScript(o.tabId, {
        code: "var css = 'body{background-color: green !important;}'; var style = document.createElement('style'); style.setAttribute('id', 'CarbonicEditionStyle'); style.setAttribute('class', 'CarbonicEditionStyle'); style.setAttribute('type', 'text/css'); style.appendChild(document.createTextNode(css)); document.getElementsByTagName('html')[0].appendChild(style);"
  });
}, {
  url: [{hostContains: 'google.com'}]
});

有人知道这是怎么回事吗？上述所有解决方案均有效，但闪烁仍在发生。

Answer 1

Stylish-chrome分机fixed the flicker只需使用 webNavigation.onCommited 事件，您应该已经能够解决问题。但是，您遇到的问题可能是由于您提到 web_accessible_resources 后从扩展包中异步读取 css 代码引起的。在这种情况下，将其缓存在 chrome.storage.local 或 sessionStorage 或 localStorage 中。或者考虑将 CSS 嵌入到您的内容脚本中。

关于您发布的代码的一些 [可能是多余的] 注释:

1. 不要使用 DOMSubtreeModified 事件，因为它 a) 实际上不需要 -(您甚至可以在网页被解析之前注入(inject)元素)和 b) 它是古老的/不推荐使用的/缓慢的/糟糕的.

   所以整个内容脚本可能是:

   var style = document.createElement('style');
   style.id = "CarbonicEditionStyle";
   style.className = "CarbonicEditionStyle";
   style.type = "text/css";
   style.textContent = "body{background-color: green !important;}";
   (document.body || document.head || document.documentElement).appendChild(style);
   

2. 在 executeScript 中使用 runAt: "document_start" 因为默认情况下它是 document_idle 通常仅在加载 DOM 时发生并且解析:

   chrome.tabs.executeScript(o.tabId, {runAt: "document_start", code: "......"});
   

3. 考虑通过 insertCSS 直接注入(inject) CSS(不是真的需要消除闪烁，它不允许您禁用注入(inject)的样式，但为了完整性):

   chrome.tabs.insertCSS(o.tabId, {runAt: "document_start", code: "body{background....."});
   

4. "matches": ["*://google.com/*"], 不会匹配默认使用的 www.google.com，所以它应该是 "匹配": ["*://*.google.com/*"],
5. google.com 不是唯一的域名，还有很多国际域名。