Chrome小插件开发 - 获取网站cookies

开场白

chrome 插件/扩展 (chrome extension) 想必都是用过的嘞，比如屏蔽广告、解除网站登录限制、一键下载音视频等等的”利民“功能。

虽然插件丰富多彩，但总会出现找不到满足自己特定需求插件的情况，但正所谓世上无难事，就怕没人做，别人不做我来做，自强不息棒棒棒，我是开发我骄傲，oh ~ yeah！

俺就碰到了这么一个简单的场景：查看当前网站所使用的 cookies 并以字符串的形式拿到它。先是在插件市场兜了一圈，发现都是那种 key - value 一对一对查看的，但我就想查看所有 cookies 组成的字符串。

于是大脑飞速运转对这个问题进行了一波思考：这个功能并不复杂哎，就算开发也不会很费时吧，但没搞过chrome插件开发哎，不过开发插件用到的技术就是 web 开发三件套 (js、html、css)嘛，那学习成本也就是 api 了咯，早学早享受呀，干咯！

开始学习和开发

打开官方网站，先粗浏览一下整体内容，然后回过头开始跟着教程敲一波，学到的一些要点知识如下：

manifest.json ：开发插件必须提供该文件，用来配置插件所有的必要信息，比如插件名字、描述、版本号、图标等

{
  "manifest_version": 2,
  "name" : "Get Cookies",
  "version" : "0.0.1",
  "description" : "View all cookies on current site, include root and sub domains"
}

popup：点击插件图标会弹出一个窗体，这个窗体就是 popup 。在 manifest.json 的 browser_action 字段配置 popup，其中 default_popup 指定点击 popup 后显示的 html 内容，路径位置相对于配置文件。(小提示：json文件正常情况下是不能出现注释语句的嘞，下面注释仅是为了方便说明)
```
// ./manifest.json

{
  // ... 省略信息同上
  
  "browser_action": {
    "default_popup": "popup.html"
  }
}
```
```
// ./popup.html

<html>
  <body>
    <div>
      hello
    </div>
  </body>
</html>
```

有了上面两个文件后，一个其实插件就已经开发出来了呢 (啪啪啪)，那如何在 chrom浏览器内使用呢？

在浏览器打开插件管理页面，法一：直接在地址栏输入 chrome://extensions ，法二：点击右上三个小竖点 - More Tools - Extensions 进行打开，打开后页面如下图，我们需要先启用右边的 Developer mode，然后下面按钮会多出一个 Load unpacked 选项，点击会打开文件夹选择窗口，选择上面两个文件所在的目录即可。
然后下面列表就会多出我们的插件，此时可以前往右上插件列表里找到名叫 "Get Cookies" 的插件，点击就会显示 popup.html 的内容咯。

接下来要做的就很明确了：在点击 popup 后，让里面显示当前所处页面的 cookies。获取 cookies 需要使用插件提供的 api，api 的调用需要通过 js 代码，所以先来了解一波怎么让 popup 执行 js 先：

在开发插件时，不能将 js 代码直接写在 html 文件里，否则会报错 Refused to execute inline script because it violates the following ...，因此必须要单独新建一个 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)，点击我们的插件下面右侧的重载/刷新图标，然后重新点开 popup 会发现 js 被执行了，如果要查看日志输出，则需要右键点击插件图标，选择 Inspect Popup，此时会重新执行 popup 内容，并显示一个单独的页面，里面便可以看到 popup.js 的日志内容。

接下来开始读取并在 popup 里显示 cookies 吧。翻阅 api 手册，找到 cookies api (插播：文档里每个 api 都有对应的 examples 文件，可以随时下载下来在本地进行测试使用，可以更好快速的学习呢)。查看文档发现要使用这个 api 需要我们在 manifest.json 里添加对应权限：

// ./manifest.json

{
  // ... 同上
  
  "permissions": [
    "cookies",
    "http://*/*", 
    "https://*/*"
  ]
}

permissions 字段中后两个元素是设置 host permission，指示哪些网站下该插件可以获取 permissions 里列举的权限 (具体书写格式可参考这一部分文档) ，上面所写的表示任何 http 和 https 网站都下都可以使用。

配置好权限后就可以在 popup.js 里愉快地使用 cookies api 了，api 具体说明俺就不多啰嗦了哈，自行打印并结合文档那指定看到明白。

但在获取 cookies 前，还得先获取当前 tab 的 url 才行，直接用 window.location可以吗？不行的嘞，它会打印插件地址 (chrome-extension://a-long-extension-id)，而不是当前页面地址，想要获取当前页面地址，需要使用 tabs api，自己琢磨出怎么调用 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)
});

然后就可以快乐的获取 cookies 了：

// ./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(';')
      })
    }
  );
})

然后 reload 插件并执行查看效果，撒花！

打包发布

打包很简单，直接在插件管理页面里上面有个 Pack extension，点击后选择你的目录和密钥（没有的话忽略，会自动生成一个，然后本地保存好，后续升级干嘛的会用到它）

发布就不太简单了，注册费 5$ 都还是小事，关键是得有个支持的信用卡，国内的似乎大多都不太行呢，我的那张就没幸免，于是成功阻止了我的后续探索，555，发布不了也就算了，关键是现在浏览器 (我的版本是v85) 也没法直接本地安装 .crx 文件了，必须得发布到 chrome webstore 里才行，所以如果想要使用，只能是用上面开发时候的样子，打开开发模式，Load unpacked 进行使用，555，真是令人忧桑呢。

总结

那么上面就算一个十分简单的 chrome 插件开发过程了，更多功能则可以自行探索官网文档并结合示例代码进行研究，插件之王指日可待。在开发时，如果想要更加”现代化“，比如用 typescript 啦、用 react 啦，则可以：一是选择网上的开发模板（此处么有地址，俺么收集呢），二是遇事不爽就自己动手搭建环境。

总总结

基于上面的内容，我又添加了点击复制功能，添加了 typescript + webpack 打包，最终的 github 参考地址：github.com/XHMM/chrome…