序幕
Chrome插件/扩展程序肯定用过，比如屏蔽广告、解除网站登录限制、一键下载音视频等“受益”功能。
虽然插件丰富多彩，但总会存在找不到满足您特定需求的插件的情况。 但俗话说，世上无难事。 恐怕没人会这么做。 ，哦~是啊！
我刚刚遇到了这样一个简单的场景：检查当前网站使用的cookie并以字符串形式获取。 首先在插件市场里转了一圈，发现key-value都是一一检查的，但我只想检查所有cookie组成的字符串。
于是我的大脑飞速运转，思考了这个问题：这个功能并不复杂，即使开发出来也不会耗费时间，但是我从来没有做过chrome插件开发，但是开发插件所用的技术ins是web开发三包（js、html、css）好了，学习成本就是api，早学早享受，何乐而不为呢！
开始学习和发展
打开官网，粗略浏览一下整体内容，然后转身开始按照教程操作。 学到的一些要点如下：
{
"manifest_version": 2,
"name" : "Get Cookies",
"version" : "0.0.1",
"description" : "View all cookies on current site, include root and sub domains"
}
有了前两个文件之后，一个插件就已经开发出来了（papapa），那么如何在chrom浏览器中使用呢？
在浏览器中打开插件管理页面。 方法一：直接在地址栏输入chrome://extensions。 方法二：点击右上角的三个小竖点--更多工具--扩展程序打开。 打开后，页面如右图所示。 我们需要先启用它。 一侧是Developermode，然后底部按钮会有一个Loadunpacked选项，点击打开文件夹选择窗口，选择前两个文件所在的目录。
之后，下面的列表中将会出现更多我们的插件。 这时，你可以在右上角的插件列表中找到名为“GetCookies”的插件，点击它就会显示popup.html的内容。
接下来要做的事情很清楚：点击弹出窗口后，让它显示当前页面的cookie。 获取cookie需要使用插件提供的api，而api调用需要经过js代码，所以我们先来了解一下如何让popup执行js：
开发插件时，js代码不能直接写在html文件中，否则会报错Refused toexecute inline script because it违反了以下...，所以需要单独新建一个js文件，然后通过script标签引用该文件。 接下来，在同一目录中创建一个新的 popup.js 并更新 popup.html：
// ./popup.js
document.body.appendChild(document.createTextNode("i am created by js"))
console.log('hi');
// ./popup.html
<html>
<body>
<div>
hello
</div>
</body>
<script src="popup.js"></script>
</html>
然后回到插件管理页面（chrome://extensions），点击我们插件下方的重新加载/刷新图标，然后再次点击弹窗发现js已经被执行了。 如果想查看日志输出，需要右键单击插件图标，选择 InspectPopup。 此时会重新执行弹窗内容，并显示一个单独的页面，在该页面上可以看到popup.js的日志内容。
将其取出并开始读取并在弹出窗口中显示cookie。 翻翻api指南，找到cookiesapi（插一句：文档中的每个api都有对应的示例文件，可以随时下载到本地测试使用，让你学得更好更快）。 查看文档发现，要使用这个API，我们需要在manifest.json中添加相应的权限：
// ./manifest.json
{
// ... 同上
"permissions": [
"cookies",
"http://*/*",
"https://*/*"
]
}
Permissions数组的最后两个元素是设置hostPermission，它表示该插件可以获取哪些网站的permissions中列出的权限（具体书写格式可参考这部分文档），这意味着任何http和https网站下载后就可以使用。
配置好权限之后，就可以愉快的使用popup.js中的cookiesapi了。 api的具体说明我就不多啰嗦了。 自己复制下来，结合文档看清楚。
但是在获取cookie之前，你必须先获取当前选项卡的url，可以直接使用window.location吗？ 不会，它会复制插件地址（chrome-extension://a-long-extension-id）而不是当前页面地址。 获取当前页面地址，需要使用tabsapi，弄清楚如何调用api来获取当前url可能是本月32日，所以直接上stackoverflow，年轻的岁月又变了。 搜索代码如下：
// ./manifest.json
{
// ... 同上
"permissions": [
// ... 同时=上
"tabs", // 需要声明权限
]
}
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT}, function(tabs){
const url = new URL(tabs[0].url)
});
之后就可以愉快的获取cookie了：
// ./popup.html
<html>
<head>
<style>
#container {
width: 200px;
word-break: break-all;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="./popup.js"></script>
</body>
</html>
// ./popup.js
const $container = document.getElementById('container')
// 不把代码写在DOMContentLoaded里也是可以正常运行的，但是会经常报错$container undefined，按道理不应该的，毕竟script引入都在body最后了，对于这个怪异现象后面有缘再研究吧。
document.addEventListener('DOMContentLoaded', ()=> {
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs){
const url = new URL(tabs[0].url)
chrome.cookies.getAll({
domain: url.host
}, (cookies) => {
$container.textContent = cookies.map(c => c.name+"="+c.value).join(';')
})
}
);
})
然后重新加载插件并执行看看疗效，洒花！
包发布
打包很简单，插件管理页面直接有一个Packextension，点击选择你的目录和秘钥（如果没有就忽略它，会手动生成一个，然后保存到本地，后续会用到）升级）
出版并不是那么容易。 5美元的注册费还是小事一桩。 关键是要有一张受支持的信用卡。 虽然国外的大多都不够好，但我的也未能幸免，所以我成功停止了我的后续探索。 555，发布不了也没关系，关键是现在的浏览器（我的版本是v85）不能直接在本地安装.crx文件，必须发布到chromewebstore，所以如果你想用的话，只能用以前开发的样子网站webpack，打开开发模式，Loadunpacked来使用，555，真是让人担心。
总结
这样，即使是一个非常简单的chrome插件开发流程网站webpack，想要了解更多功能，也可以自行搜索官网文档，结合示例代码进行研究。 插件之王指日可待。 开发时，如果想要更“现代”一点，比如使用typescript或者react，可以：一是选择网上的开发模板（这里没有地址，如何采集），二不高兴自己搭建环境。
概括
在前面内容的基础上，我添加了点击复制功能，添加了typescript+webpack打包，最终的github参考地址：github.com/XHMM/chrome...
