在 Chrome 扩展中的 CSS 注入期间闪烁

Question

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

我尝试过导致此问题的方法（之后的代码）：

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

代码示例：

清单：

{
  "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);
}}

background.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) 实际上并不需要 - （您甚至可以在网页被解析之前注入元素）并且 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 直接注入 CSS（实际上并不需要消除闪烁，它不会让您禁用注入的样式，但为了完整起见）：

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

4. "matches": ["*://google.com/*"], 与默认使用的 www.google.com 不匹配，因此应为 "matches": ["*://*.google.com/*"],
5. google.com 不是唯一的域，还有很多国际域。