How to include an external object in my Chrome Extension?

Question

I've got a chrome extension with an object that looks like this:

someFunctions = { 'a': function() { doStuff(); }, 'b': function() { doOtherStuff(); } }

Currently, my extension needs to be updated every single time someFunctions requires a new function. This can be incredibly frustrating as my extension has jumped from 2 functions inside someFunctions to 21, each time requiring a new update.

I would like to instead load this object externally from my domain, so my extension would not require any new updates to fix potential bugs or small mishaps. What is the best way to go about doing this? I would like to avoid adding my domain to the permissions list in the manifest or increasing permissions in the extension at all - I don't need to load an entire .js - just some functions.

I would like to avoid restructuring the code into some weird JSON Object and am against using eval().

If it is doable at all, it would be a security bug in chrome extensions to allow it. — Steve Campbell
– Steve Campbell, Commented Feb 12, 2015 at 2:50
The code that runs in an extension is scanned for security risks when it is uploaded to google web store. Finding a way to run code that did not go through that process would be bypassing that security protection. — Steve Campbell
– Steve Campbell, Commented Feb 17, 2015 at 23:59

Xan · Accepted Answer · 2015-02-11 08:03:44Z

Normally, you would not be able to do so due to the default Content Security Policy.

However, extensions are allowed to relax this policy as long as you serve your file over HTTPS (this is a security requirement to try and prevent MITM).

Have a read of CSP documentation.

Specifically, say your JS file is served as https://example.com/awesome.js. You can't get away with "I don't need to load an entire .js - just some functions", Chrome needs to evaluate your piece of code if it contains functions.

You need to add that to your CSP in the manifest:

"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"

I don't think you can include an external script through manifest (but you're welcome to try, it'll be interesting); in case of an HTML page like a popup, you can just include a <script> tag in it.

Otherwise, you can avoid using eval by creating <script> tag programmatically and adding it to the page. For content scripts you should probably use AJAX/eval (or sort-of-eval with the {code: "..."} form of tabs.executeScript)

I went with a XMLHttpRequest(); to my server with CORS enabled from the background script and passing the responseText to my content script, then using eval() on it. No extra permissions were required and it seems to work just fine.
Indeed. Content scripts are allowed to use eval, and don't need to amend global extension CSP. As long as you do have permissions to do XHRs to your site, you're okay. But do try to follow the guidelines that this script is to be served over HTTPS to prevent MITM
Something I don't understand: Passing the responseText through messages and doing eval(req.message) in the content script works, but running executeScript and code: 'eval('+xhr.responseText+')' directly to the tab caused a failure partway through code execution.
You should not eval code you're passing to executeScript: it expects a string to be evaluated in another context.

Collectives™ on Stack Overflow

How to include an external object in my Chrome Extension?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related