![]() These files include a Webpack configuration file with necessary scripts that you can use at will. What does each file do in the Chrome Extension?Īs we mentioned before, the files outside the folder “extension” are only used to bundle the content script. Just remember to reload your extension by clicking on the reload button every time you update the code. Remember that it is the “extension” file that actually contains the extension and not the upper folder with all the bundler configurations. Click on that button and select the “extension” folder of your extension. This will show a new button at the top-left titled “Load unpacked”. Just go to your extensions manager at chrome://extensions and enable the developer mode (top-right corner). This is very easy to do in Google Chrome. In order to start testing your extension locally, you will need to load it to your Chrome browser. Here is the folder structure: my-extension/ ├── extension/ │ ├── background.js │ ├── content.js │ ├── icons/ │ │ ├── icon16.png │ │ ├── icon32.png │ │ ├── icon48.png │ │ └── icon128.png │ ├── popup/ │ │ ├── popup.html │ │ └── popup.js │ └── manifest.json ├── src/ │ └── // source files for the extension ├── ├── ├── package.json └── node_modules/ └── // dependencies installed by npm Load your extension locally The files outside this folder are just the bundler (Webpack) and your NPM packages. This is the folder you must load to your browser or the Chrome Web Store. ![]() ![]() In this boilerplate, all the extension code is contained in the folder “extension”. Let me explain to you real quick how it works.Ī Chrome extension’s folder structure is a little different than that of a regular application. This boilerplate will help you get started faster. ![]() To start from an already configured boilerplate, you can download it from this GitHub repository.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |