The 2 Things I Wish I Knew Before Making a Chrome Extension

  1. You can’t use outside modules.
  2. You can’t use environment variables.

Now, I know some of you got real up in arms just now about the first one. However, I would advise that if you’re first starting out trying to create a Chrome Extension, assume that you cannot use outside modules. Especially if you’re more used to a Node.js environment and not the browser environment. Here’s why.

There are 3 issues with trying to use outside modules. 1 — You can’t use require(‘module’) or import it into any .js file in your chrome extension. 2 — If it has other dependencies than what is in that one file, it won’t work. 3 — If it requires any authentication, it won’t work.

You can only use modules that you have the complete file for, and then you would include it on your manifest.json. You do also have access to the chrome.* api. Parts of it. Not the whole thing. It’s also different for content_scripts and background_scripts. Content scripts are more limited in what they can use. In your manifest.json file it will look something like this:

background: {

scripts: [’jQuery.js’, ‘background.js’]

}

That way, background.js can use what is in jQuery.js. But not the other way around.

2. You can’t use environment variables. You don’t have access to the environment process that the user is operating in. So if you need to make an api call that requires a key or if there is anything that you want to hide from users, you have to put that on a server somewhere that you’ve built or have access to. You’ll do an XmlHttpRequest from a script( a .js file in your project ) to your server where you have your api key away from easy access and make your api calls from there. Then forward on the response from the api call back to your scripts. I haven’t yet implemented this fully into my extension that I’m currently working on. But when I do, I believe it will be something like this:

persistentBackgroundScript.js {

browserAction-onClick-listener -> on ActiveTab executeScript(scraperContentScript.js)

} =>

scraperContentScript.js {

gather info-from-webpage-for-api-call -> sendMessage(info-from-webpage-for-api-call) back to persistentBackgroundScript.js

} =>

persistentBackgroundScript.js {

onMessage (receives info-from-webpage-for-api-call) -> XmlHttpRequest(info-from-webpage-for-api-call) to myServer

} =>

myServer {

( receives info-from-webpage-for-api-call ) sends api call with ‘info-from-webpage-for-api-call’ using api-key and XmlHttpRequest

} =>

api {

processes info-from-webpage-for-api-call -> sends response back to myServer

} =>

myServer {

Receives response, forwards it to persistentBackgroundScript.js

} =>

persistentBackgroundScript.js {

Receives response, executes modifierContentScript.js with it

} =>

modifierContentScript.js {

Modifies original webpage DOM

}

  1. Keep in mind that you’re using http protocol when you make an XHR(XmlHttpRequest). So if you’re sending an object for example, you’ll have to xhr.send(JSON.stringify(obj)) and then when you get the response you’ll have to JSON.parse(xhr.response) to turn the string you get into a usable JavaScript object.

Sending info between scripts you’ll use a variation of chrome.runtime.sendMessage(obj). Sending info between your scripts and an api, you’ll use XmlHttpRequest.

One last note. As you’re searching around the internet trying to solve the issues you come against. A background page is like background.html. a background script would be background.js. Any .js file you’re using is some kind of script. Any .html file you’re using is usually referred to as a page.