使用 chrome 扩展动态更改 html 页面

Question

我正在尝试更改 DOM img 对象的图像 src，但是在尝试使用 chrome 扩展更改图像时，我遇到了图像闪烁的问题。

manifest.json

  "content_scripts": [{
  "js": ["./js/content.js"],
  "matches": ["*://example.com/*"],
  "run_at": "document_start"
}

content.js

var img = 'data:image/png;base64,.....'
var avatar = (document.getElementsByClassName('page_avatar_img'))[0];
avatar.src = img;

在这种情况下，扩展程序会等待创建 DOM 对象，然后才会将原始图像替换为我的 img 并闪烁。

我可以在创建 DOM 对象之前更改 html 文档的文本以避免这种情况并立即创建我需要的对象吗？

在 manifest.json 中的“document_start”上更改“run_at”对我没有帮助，因为 chrome 扩展找不到“头像”对象。

感谢大家的解答！

Answer 1

你应该看看chrome.webRequest。

将以下代码添加到您的manifest.json：

{
    "name": "My extension",
    ...
    "permissions": [
      "<all_urls>",
      "webRequest",
      "webRequestBlocking"
    ],
    ...
  }

然后在background.js添加事件监听器：

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {

      // some logic on change `details.url` to modified_url  

      return {redirectUrl: modified_url};
    },
    {urls: ["<all_urls>"]},
    ["blocking"]);

别忘了还要在清单文件中指定您的 background.js：

"background": {
   "scripts": ["./background.js"],
   "persistent": true
}