Before recorded a simple plug-in development, relatively basic, and some holes did not fill, this time again developed, finally learned a lot, specially to record, mainly is how to use esModule in the browser plug-in
There are links to related resources at the end of the article, which would have saved me a lot of time if I had seen them earlier
Pit 1: How to use esModule
First of all, we can’t use import directly as we did in vue/React projects, because we already import cli templates in the import file. So we can use the esModule as we like, and it’s easy to forget that we need to introduce this step manually. For example, in background, to use the esModule here, we need to modify the manifest.json file as follows:
// manifest.json
{
// ...
"background": {-"scripts": ["background.js"],
+ "page": "background.html",},// ...
}
// background.html
<script scr="background.js" type="module"> </script> / / note type = "module"
Copy the code
This way you can use the esModule in background.js
How do I use esModule in default_Action (popUp)
In principle, with this setup, and popup itself requiring an HTML, we’re going to do it, and we’re going to do it, but there’s a big catch, and that’s the whole file name, and the suffix has to be added
// popup.js
import A from './somewhere' // wrong!
import A from './somewhere.js' // works!
Copy the code
Here is a description of ruan yifeng’s ES6 tutorial
However, some people will have doubts. We can not write the suffix in our daily development of Vue React. That is because our projects are packaged.
The suffix is not important in the URL. What is important is the content of the content-Type header field. As long as the resource server responds correctly to your request for the resource, you can sell it
In our project, we know that the final code is packaged, such as webpack, and even degraded, through __webpack_require__, then the browser is performing the packaging file, do you need to write how to find the corresponding resource is handled by the packaging tool
So remember to add file extensions in native development environments
How to use esModule in content_scripts
The same is true, but the configuration is a bit more complicated, and the code will be posted directly. Some important points will be put in comments
// manifest.json
// ...
"content_scripts": [{"matches": ["<all_urls>"].// Under which page to execute the following js script
"js": ["content.js"]}],"web_accessible_resources": [ // Resources that need to be used in contet_script must be registered here
"content-main.js"."content-module.js"
]
// content.js
const script = document.createElement('script')
script.setAttribute('type'.'module')
script.setAttribute('src', chrome.extension.getURL('content-main.js'))
const head = document.head || document.getElementsByTagName('head') [0] | |document.documentElement
head.insertBefore(script, head.lastChild)
// content-main.js
import { A } from './content-module.js'
Copy the code
Related resources and references
-
ChromeExtensionsBoilerplates
-
ES6 Modules in Chrome Extensions — An introduction
-
Import name extension problem
Related articles
It was so easy to develop a browser plug-in!