This blog is to document how to build a Chrome Extension with Typescript.
In detail, I will use Rollup as the bundler rather than Webpack since Rollup provides a lighter solution for general bundling task.
The Chrome Extension is like a regular web app that runs in chrome, but it gets the privilege to hijack websites and inject contents/scripts.
Furthermore, there are two scripts here one is content that will be injected into a website by the browser and background script, which is an offscreen script that acts as a secondary thread.
Apart from scripts, we also need to deal with assets(HTML, image, and manifest) through the development process.
Thus for our bundler, we want it can package the two scripts separately and package assets into one folder.
Above is the structure where
src has two folders
content storing for their scripts and a
json file descriping the manifest.
manifest.json, we need to define the entry point for
content. Also, we need to mention the permissions we need as well as other basic information.
After the above Chrome Extension setting, we need to deal with bundler setting in this case – Rollup.
Below is the Rollup config file:
import typescript from 'rollup-plugin-typescript2';
A couple things to mention,
multiInputis for providing multi-entry points for bundling.(background script and content script)
resolveare both for finding codes that need to be bundled.
copyis for moving assets file to the final build folder.