Deploying an Extension to the Chrome Store in 30 minutes
Permissions and manifests and messaging, oh my! Deploying a Chrome Extension can seem like a daunting task but you can submit to the store in less than half an hour and have it live as soon as the next day!
So why write about this? Earlier This week, a Twitter “Intern” (I think he technically is) asked if people could go and hack the Twitter search menu to make it less painful.
Within a few days, a bunch of people across the internet went and created quick scripts to inject code into Twitter to make the experience better. I had a shot at it which you can see below.
However, having people inject random scripts into their browser can be a bit dangerous, so taking this to the next level, it makes sense to be able to stick this in a Chrome Extension which is a bit more safer for users. I went and did it for my fun demo, and figured I’d write up a guide on how to do it for people that want to make an extension quickly themselves.
There’s three major components to submitting an extension to the chrome store: a Chrome Developer account, a privacy policy, and of course an extension (with the script you want to inject). Then take all of that and stick it in the Chrome store! So here’s how to go about getting these done.
Create your Chrome Developer Account
This is the easiest step. You just need to pay Google $5; it used to be a bit pricier but it looks like Google’s dropped the prices. Just go to https://chrome.google.com/webstore/devconsole/register and pay Google your $5 and it lasts forever. You’ll need to come back here later to actually upload the extension but we can worry about that later.
Grab a domain and create a quick landing page
Step 1 (optional): Find the domain.
There’s quite a few hosting providers out there. I just used Google for this and went to https://domains.google.com/registrar/ to find myself a domain. It costs $12 for a .com for a year for https://www.fixedui.com/.
Step 2: Create a quick landing page.
For a fast landing page, https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template is pretty good. You can just fork it and then download it and customize it however you want. The main page is in the filebase.tsx , and you can just swap in whatever info you want (or leave the defaults, Google doesn’t care). You can see the one I threw up at https://github.com/matthewlouisbrockman/FixedUI_Frontend.
Step 3: Host the landing page
The above template has an easy to click option in the Readme.md to deploy directly to https://vercel.com/. This lets you instantly deploy your website as you make changes to it. If you completed Step 1, you can then set it up to deploy to your custom domain via the A-record.
Step 4: Grab a privacy policy
This part’s kind of long and I’m not sure the best way to do it so I just used https://termly.io/products/privacy-policy-generator/ to go and make one. I copied the code into a file in my repo called privacy.html which I then stuck into the public folder in my nextjs app. This means that you can go to wherever it’s hosted /privacy.html and it’ll be there automatically.
Create Your Extension
For the challenge, the goal was to create a script that would modify Twitter search to be less bad. I already had my code written, so I dropped it into another template, https://github.com/lxieyang/chrome-extension-boilerplate-react. That’s a great template for deplying an extension and it includes a bunch of files you might want to use later. However, for now all that matters is getting your script into there (you can see my modification at https://github.com/matthewlouisbrockman/FixedUI_Extension).
My script was called fixer.js , so I created a folder in the pages directory called Twitter and then dropped my fixer.js file in there. Then I just had to go to webpack.config.js and update the entry object to
entry:{
...,
twitter: path.join(_dirname,'src', 'pages','Twitter', 'fixer.js')
}What this does is create a singled bundled javascript file called [name.bundle.js] at build time that has all the dependancies you’ll need.
Then you need to edit manifest.json , which is the core piece of a Chrome extension that tells chrome what files you’re loading where. I deleted all the content scripts and instead just injected mine to only fire on Twitter -
"content_scripts": [
{
"matches": ["https://twitter.com/*"],
"js": ["twitter.bundle.js"],
"run_at": "document_end"
}
],As you can see, the matches parameter is what sites the script will inject on, js is the bundle created by the webpack, and run_at says to inject once the page loads.
To test it in real time, you just do npm start , and to create a production build folder, you run NODE_ENV=production npm run build . (This is all in the readme that comes with the starter code as well). We’re now ready to submit this to the chrome store! We simply zip the build folder made by running that last step and go back to the Chrome store (https://chrome.google.com/webstore/devconsole) and submit it.
For testing it, you just go to chrome://extensions , make sure Developer Modeis switched on and import the build folder using the load unpacked button.
Finalizing the Submission
We’re now ready to submit to the chrome store! We drag the zip file into the Chrome store submission box to start. We need to fill in all the fields they ask about, include a quick video or description if we want, and link to the website and privacy policy we created above. And now we’re done!
At this point, it can take a day or more for Google to check your code and see if there’s any security or privacy issues. You’ll need to do this each time you resubmit but hopefully the hard part of figuring out what you need to do to get started is done!
