防止页面上可见的 Chrome 扩展在每次页面加载时闪烁？

Question

我需要一个 Chrome 扩展，以固定位置 div 或 iframe 的形式在页面中提供一些额外的内容。我需要扩展程序在打开后保持可见，仅在用户单击某些内容时关闭。

最简单的 API 看起来像 default_popup。然而，这可能位于页面上方，因为它相对于扩展程序的图标定位。您可以尝试使用空格将其裸化，但浏览器的 chrome 高度可能因不同的用户而异，因此这不是一个可靠的解决方案。

"browser_action": {
  "default_popup": "popup.html",
}

我尝试使用内容脚本将 div 插入页面正文：

// manifest.json
{
  "name": "Thing",
  "version": "0.1",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab"]
}

// content.js
const div = document.createElement('div');
div.style.background = 'gold';
div.style.height = '100px';
div.style.width = '100px';
div.style.position = 'fixed';
div.style.top = '0px';
div.style.right = '0px';
div.style.zIndex = '9000000000000000000';
div.frameBorder = 'none';
div.border = '1px solid lightgrey';
div.style.boxShadow = 'rgba(0, 0, 0, 1) 0px 8px 16px';
div.innerText = 'Small';
document.body.appendChild(div);

这是我需要的工作和定位，但是由于 JavaScript 依赖，每次导航到新页面时 div 都会闪烁。有没有办法解决这个问题，因为它很让人分心？

Answer 1

正如@wOxxOm 所说“使用 document_start 并附加到 document.documentElement”

// manifest.json
{
  "name": "Thing",
  "version": "0.1",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "run_at": "document_start",
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab"]
}

// content.js
const div = document.createElement('div');
div.style.background = 'gold';
div.style.height = '100px';
div.style.width = '100px';
div.style.position = 'fixed';
div.style.top = '0px';
div.style.right = '0px';
div.style.zIndex = '9000000000000000000';
div.frameBorder = 'none';
div.border = '1px solid lightgrey';
div.style.boxShadow = 'rgba(0, 0, 0, 1) 0px 8px 16px';
div.innerText = 'Small';
document.documentElement.appendChild(div);

防止页面上可见的 Chrome 扩展在每次页面加载时闪烁？

Prevent flicker on each page load for Chrome extension that is visible on the page?

google-chrome-extension