Question... how to configure "web_accessible_resources" for js files?

[Xingheng Wang]

Background:

I am trying to inject a script via script tag. The normal injection run by current bioler plate is to excuted still under the contentscript context, beucase it uses chome.tabs.executeScript()...

The reason I need the scrip tag to inject the code is named in that Stockoverflow page below: Since scripts injected under a script tag (by contentscript) have access to some resources that content script itself do not have.

http://stackoverflow.com/questions/9263671/google-chome-application-shortcut-how-to-auto-load-javascript/9310273#9310273

If you want to access global methods or properties, you have to dynamically create a <script>, and inject it in the page.

contentscript.js

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.parentNode.removeChild(s);
};

So my question/problem is:

In both the dev manifest and production, I added

  "web_accessible_resources": [
    "inject.html",
    "js/myfile.bundle.js"
  ],

but I keep getting the error:

Denying load of chrome-extension://pbibkaembagmglekahlenkagincbkpnl/js/myfile.bundle.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

So if I want to add files to web_accessible_resources, how should I configure it differently for dev and prod?

Thanks

[Xingheng Wang]

bit more context:
when I

npm run build

and load the production version into the extension.
myfile.bundle.js is loaded fine, chrome doesn't deny loading it, since myfile.bundle.js is registered properly as web_accessible_resources.

However, webpack seems to inserted some code into myfile.bundle.js.

if (process.env.NODE_ENV === 'production') {
  __webpack_public_path__ = chrome.extension.getURL('/js/');
} 

so it fails at above step in customPublicPath. and it make sense, when a script is injected as a script tag, it gains resources on the page, but it loses access to chrome.* resources, since the script in script tag is executing in the context of webpage rather than context of the chrome extension.

so in prod webpack, I changed this from

    myscript: [customPath, path.join(__dirname, '../chrome/extension/myscript')],

to

   myscript: [path.join(__dirname, '../chrome/extension/myscript')],

so it seems to be working on prod.

However, I wondering how do I configure let this work on dev?

any ideas?

[Jhen-Jie Hong]

Hi @xinghengwang.

In dev mode, you should use http://localhost:3000/js/myfile.bundle.js instead of chrome.extension.getURL('js/myfile.bundle.js'), this is why you successfully load it in production, but development not.

so it fails at above step in customPublicPath. and it make sense, when a script is injected as a script tag, it gains resources on the page, but it loses access to chrome.* resources, since the script in script tag is executing in the context of webpage rather than context of the chrome extension.

so in prod webpack, I changed this from

Yeah If you have such a use case, you should remove customPath.

[Xingheng Wang]

thanks. that works for dev environment.