CODEWITHSUNDEEP
javascripthtmldomgoogle-chrome-extension
P. Shagaev
P. Shagaev

Reputation: 1

Changing a html page on the fly using chrome extension

I'm trying to change image src of DOM img object, but i have a problem with an image blinking when try to change it using chrome extention.

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;

In this case, the extension waits for the DOM object to be created and only then replaces the original image to my img with blinking.

Can I change the text of an html document before creating a DOM object to avoid this and immediately create the object I need?

Change "run_at" on "document_start" in manifest.json did not help me, because chrome extention can't find an 'avatar' object.

Thank everyone for answers!

Upvotes: 0

Views: 1007

Answers (1)

Sergey Perfilev
Sergey Perfilev

Reputation: 81

You should look at chrome.webRequest.

Add the following code to your manifest.json:

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

Then in background.js add the event listener:

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

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

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

Don't forget also specify your background.js to manifest file:

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

Upvotes: 1

Related Questions