Chrome extension - loading file from localhost to content_scripts

Question

I'm developing Chrome Extension and I need to load a javascript file to content scripts, but that file is being served via webpack-dev-server. So it's approachable only on localhost.

I tried to change my manifest.json:

"content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "http://localhost:3000/scripts/content_bundle.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }

But then I got an error in Chrome Extensions window:

woxxom · Accepted Answer · 2015-10-06 09:34:44Z

4

Only local files can be specified in "content_scripts" section.

Solution:

add "permissions": ["http://localhost:3000/scripts/*", "tabs"] to manifest.json
download the script using XMLHttpRequest (there are many examples) in your background script (or better an event page script) when needed
save it in chrome.storage.local or localStorage (so you can load it on every extension start from the storage without redownloading)
inject the script:
- add a tabs.onUpdated listener and inject the script using tabs.executeScript
- alternatively use declarativeContent API with RequestContentScript action (despite the warning on the doc page it should be actually supported in the Stable channel but of course do some tests first).

answered Oct 6, 2015 at 9:34

woxxom

75.2k15 gold badges161 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ladislav M Over a year ago

Thanks. And what would you recommend for background script?

woxxom Over a year ago

@LadislavMaxa, it should contain the code that actually does the things listed in the answer.

Steve06 Over a year ago

@wOxxOm Interesting approach, I've not seen it documented anywhere. How would you incorporate hot reloading upon changes in the injected .js script? Or does your solution already account for that?

woxxom Over a year ago

Hot reloading is an unrelated task. This answer in a few words is "download and execute the script".

Collectives™ on Stack Overflow

Chrome extension - loading file from localhost to content_scripts

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related