之前记录过一次插件的简单开发，比较基础，而且有些坑没填上，这次再次开发，终于又学到了很多，特地来记录一下，主要是如何在浏览器插件中使用esmodule
文末有相关资源链接，如果我早点看到的话，会节省我很多时间
坑一： 如何使用esmodule
按理来说，现在浏览器早都支持esmodule了，这个不应该是难事把，嘿嘿，他就有那么多坑
首先 我们不能像在vue，react项目中那样，直接使用import，因为在工程中 ， 那些cli模板啥的早都在入口文件给你引入好了，所以我们随心所欲的使用esmodule，
而在这里，我们很容易忽略需要手动引入这一步，以background为例，我们要想在这里使用esmodule，需要把manifest.json文件修改如下：
// manifest.json
{
// ...
"background": {
- "scripts": ["background.js"],
+ "page": "background.html",
},
// ...
}
// background.html
<script scr="background.js" type="module"> </script> // 注意 type="module"
通过这种方式就可以在background.js中使用esmodule了
坑二： 如何在default_action(popup)中使用esmodule
按理来说，有了前面的铺垫，而且popup这里本身也是需要一个html的，我们按部就班的做就是，其实也确实如此，但是这其中还包含一个巨坑，那就是引入的文件必须是完整的文件名，必须加后缀
// popup.js
import A from './somewhere' // wrong!
import A from './somewhere.js' // works!
这里可以参考一下阮一峰es6教程的一段描述
但是有的小伙伴就会有疑问了，我们日常开发vue react 不写后缀也可以的呀，那是因为我们的工程都是经过打包的，
正常情况下，浏览器在解析import语句的时候，是需要写后缀名的，因为这可以帮助浏览器正确的请求资源，浏览器在得到这些url后，会向服务器发出http请求，后缀在url中是无关紧要的，重要的是content-type这个头部字段的信息，在解析的时候会根据这个后缀名得出对应的content-type(资源服务器是有一个后缀名 到HTTP 响应头 MIMEType 的映射),只要资源服务器能正确响应你的资源请求，你可以挂着羊头卖狗肉
而在我们的工程中，我们知道，最终上线的代码是经过打包处理过的，像webpack这样的，甚至都会进行降级处理，通过__webpack_require__，这时候浏览器执行的就是打包文件，需不需要写 如何查找对应资源都是由打包工具来处理的
所以我们需要记住，在原生开发环境下一定要记得添加文件拓展名
坑三： content_scripts中如何使用esmodule
其实也是一样的道理，不过配置更加复杂一点，直接贴代码了，一些重要的地方会放在注释中
// manifest.json
// ...
"content_scripts": [
{
"matches": ["<all_urls>"], // 在哪些页面下执行下面的js脚本
"js": ["content.js"]
}
],
"web_accessible_resources": [ // contet_script中需要用到的资源 必须在这注册
"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'
