An extension to unblock your medium reading experience.
Clone this repository, and then, in this directory:
npm installnpx webpack
Your unpacked Chrome extension will be compiled into dist/. You can load it into Chrome by enabling developer mode on the "Extensions" page, hitting "Load unpacked", and selecting the dist/ folder. You can pack the extension into a .crx by using the "Pack extension" button on the same page.
Use npx webpack to recompile after editing.
The default source layout looks like this:
src
├── app
│ ├── background.ts
│ └── content.ts
├── styles
│ └── popup.css
└── ui
└── popup.tsx
background.tswill get loaded as the extension background script, and will run persistently in the backgroundcontent.tswill be injected into the URLs matched bydist/manifest.json'smatchesentry (see Match Patterns documentation)popup.tsxwill become the extension's "browser action" popup- NOTE:
popup.tsxcompiles intodist/js/popup.js. It is loaded intodist/popup.htmlby an explicit<script>tag on that page.dist/popup.htmlis static and is not automatically generated by the build process.
- NOTE:
popup.csscontains styles for the popup. These styles are loaded withstyle-loadervia theimportline at the top ofpopup.tsx(and directly injected into the popup via JavaScript)
dist
├── _locales
│ └── en
│ └── messages.json
├── icons
│ ├── icon128.png
│ ├── icon16.png
│ ├── icon19.png
│ └── icon48.png
├── js
│ ├── background.js
│ ├── content.js
│ └── popup.js
├── manifest.json
└── popup.html
dist contains the Chrome extension. You can delete js/*, as its contents will be regenerated by webpack, but the rest of the contents of dist will not.
This work is inspired by Extensionizr, and the icons in dist/icons remain under the Extensionizr license.