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文档的文本以避免这种情况并立即创建我需要的对象吗？

更改＆＃34; run_at＆＃34; on＆＃34; document_start＆＃34;在manifest.json中没有帮助我，因为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
}

使用chrome扩展程序即时更改html页面

1 个答案: