现在这个互联网年代，咱们离不了浏览器插件这玩意儿。它们把一堆文件打包，给咱们的网生活带来各种方便，什么数据抓取、界面装扮都有。下面我来跟大家聊聊插件怎么搭的、开发中的一些小窍门，还有我自己开发过程中遇到的问题。

一、浏览器插件的基本构成

浏览器插件其实就是个网页，里面有HTML、CSS、JS、图片这些，加起来就是一个能用的软件。里面最重要的是个叫`manifest.json`的文件，它就像插件的证件，告诉浏览器它能干啥有什么权限。没了这个，浏览器都不认识它，不装它。其他的文件就是写这个插件能做什么，开发者想怎么摆设就怎么摆设。

搞插件开发，搞清楚文件的格式那可太关键了。一般来说，插件都得有个专门的文件夹布局，尽管浏览器对这事儿不那么讲究，但这布局好有利于后续的维护和升级。比如，插件的版本号都会放个文件夹里头，这样用户一眼就看清自己用的是哪个版本的插件。这版本管理对开发者来说那是一定要的，尤其你这儿还得老更新迭代。

二、开发插件的初步体验

想当年我头一回试着做浏览器插件，完全懵了。虽说我多少懂点前端，但对于插件这个事儿，完全是个门外汉。特别是一说到处理权限和那些API，我就一筹莫展。后来翻了翻文档和看了几篇教程，我终于慢慢摸出了门道。

我发现做浏览器插件看起来不难，但实际上得费心思研究细节。就拿和窗口的标签页交互、发消息什么的来说，这些都是学过程中觉得挺关键的。在实践中，我慢慢学会了怎么用浏览器给的API，现在我的插件能用得挺顺溜的。

三、抓取数据的挑战

去年我试着一抓淘宝卖家资料，可真是费了不少劲。技术不行，模拟登录的时候老碰上验证码，数据根本没拿到手。这事儿让我明白，技术限制了不少时候想法的发挥。所以我就想了个法子，弄了个浏览器插件，定时帮我把想要的信息都抓回来。

{
   "author": "Milk Lee \u003Cmilk.lee@qq.com>",
   //作者名称
   "background": {
      "scripts": [ "/bundle/commons3.js", "/bundle/bg.js" ]
   },
   //!!!"背景页"虽然叫这个名字，但是引入的都是js的文件，是可以没有一个明确的页面的，也可以引入html文件但大部分插件是采用了用JS动态生成的方案
   //我们可以理解成只要浏览器在运行，这个页面就一直在运行，这个文件中的变量就不会被销毁，便于我们在多个标签页（tab）之间通讯
   "browser_action": {
   //这个browser_action包括浏览器右上角的插件图标，图标上显示的效果，比如气泡提示，on/off等状态,和点击之后的弹窗。（下方会有截图说明一下）
      "default_icon": {
         "19": "/logo.png",
         "38": "/logo.png"
      },
      //默认图标(old)依然会生效，下方有新的
      "default_popup": "/popup/index.html"
      //！！！弹出页 popup
      //这个地方也就是我们使用插件最多的交互页面，需要注意的是，在这个页面只要隐藏，就代表这个页面被关闭了，也就是说上面的数据无法保存。
      //所以一些需要临时储存的信息我们需要保存到background中
   },
   "commands": {
      "_execute_browser_action": {
         "suggested_key": {
            "default": "Ctrl+Q",
            "mac": "MacCtrl+Q"
         }
      },
      "translate": {
         "description": "翻译网页中选中的文本",
         "suggested_key": {
            "default": "Alt+A"
         }
      }
      //绑定快捷键，猜测是按下快捷键后会执行background文件或content_script中相应的方法
      //第一个是弹出popup，相当于点击图标
      //第二个直接执行translate方法
   },
   "content_scripts": [ {
   //嵌入页面内部的文件，可以认为等效于在指定页面中增加的内容，这里是数组，可以给不同页面分配不同的js文件
      "all_frames": true,
      "css": [ "/bundle/commons1.js.css" ],
      "js": [ "/bundle/commons3.js", "/bundle/commons2.js", "/bundle/commons1.js", "/bundle/content.js" ],
      "matches": [ "http://*/*", "https://*/*", "file:///*" ],
      //指定适用页面
      "run_at": "document_start"
   } ],
   
   //扩展策略，安全方面的，我也不是很了解这块
   "content_security_policy": "script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'",
   //插件简介
   "description": "支持谷歌、百度、有道三大翻译和朗读引擎，可以方便的查看、复制和朗读不同引擎的翻译结果。",
   "homepage_url": "https://github.com/lmk123/crx-selection-translate",
   //如果你把插件放在自己的网站上需要，如果发布在市场就不需要了
   "icons": {
      "128": "/logo.png",
      "16": "/logo.png",
      "48": "/logo.png"
   },
   //图标(new)三种尺寸的图标在不同地方显示
   "incognito": "split",
   //设置在隐身窗口中做出的相应，详情查看文档
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC28U3at5pX9CdXpey4QOxy5tpKRQQ+R3IXAaj8NPqT4pQh9X0jpX7Cc4w8SSrVph+m43e9T72B8NEjc9km4boLuxshHVnTGi7HLlQpPQV10BM2GeNMxQDkK5ca3oL6gVMMNGnq+PJDygweV1yMfcsJlLL/zdmrZ5CXADHBZ2lUbwIDAQAB",
   //这个值并不是开发时显式指定的，而是Chrome在安装.crx时辅助生成的，作为一个唯一标志值。
   "manifest_version": 2,
   //从Chrome 18开始，开发者应该指定版本号为2
   "minimum_chrome_version": "29",
   //支持chrome 的最低版本
   "name": "划词翻译",
   //扩展名称
   "options_page": "/options/index.html",
   //选项页面(old)
   "options_ui": {
      "chrome_style": true,
      "page": "/options/index.html"
   },
   //同为选项页面,是上面选项的升级版
   "permissions": [ "\u003Call_urls>", "contextMenus", "storage", "clipboardWrite", "clipboardRead", "activeTab", "identity", "webRequest", "webRequestBlocking" ],
   //!!!要求chrome浏览器授予的权限
   "update_url": "https://clients2.google.com/service/update2/crx",
   //更新地址，如果发布在市场则不需要自己填写
   "version": "6.4.3",
   //版本号
   "web_accessible_resources": [ "/bundle/*.woff", "/content-scripts/web/embed/*", "/pdf-viewer/*" ]
   //指定当前网页可以访问的插件自带的资源，是相对于manifest文件的路径
}

在这个项目里，我得搞定技术难关，还得兼顾用户体验和数据准度。经过反反复复调试和调整，那功能算是搞定了。这经历让我明白，搞插件开发不只是技术活儿，更考验人的问题解决能力。

四、学习与成长

搞这个插件开发，我真是学到了不少新东西。虽然我的主要任务是前端页面，但也顺便接触了不少后端和数据处理的知识。这事儿让我明白，玩跨界学习能让人对整个开发流程有更全面的理解。

咱和团队一块儿混，收获了不少实际操作的门道和经验。这过程中谷歌浏览器出现隐藏此插件，团队配合超关键。大家各有所长，互相教互相学，干活儿效率就高了。这种团队精神对我影响很大，我也更看重和朋友一块儿干事儿的机会了。

{
  {
    "manifest_version": 2,
    "name": "starxder_demo",
    "version": "1.0",
    "description": "一个浏览器插件demo",
    "browser_action": {
        "default_popup": "popup/popup.html"
    },
	
	//这里说明一下即使匹配页面写成  "*://*/*" 空白页和chrome浏览器的 设置 插件 浏览历史 等页面依然不会生效，所以小伙伴们使用的时候要注意。
    "content_scripts": [{
        "matches": [
            "*://*/*"
        ],
        "js": ["content/content.js"]
    }],
    "icons": {
        "128": "icons/smile-48.png",
        "16": "icons/smile-48.png",
        "48": "icons/smile-48.png"
    },
    "permissions": [
    ]
}

五、未来的展望

技术进步不停歇，浏览器插件也越玩越花。我打算深入研究怎么造插件，多发掘点新玩法。不管是从数据抓取到提升用户体验谷歌浏览器出现隐藏此插件，或者是和其他软件配对，这都是我想接着瞧瞧的方向。

我希望能把学到的玩意儿跟更多人分享。不管是写文章还是弄开源项目，我都乐意给插件圈添把火。前面还有好长的路要走，我超级期待在这个领域里越走越远，越做越好。

<html lang="en">
<html>
<head>
    <meta charset="utf-8">
    <title>Titletitle>
    <script type="text/javascript" src="popup/popup.js">script>
head>
<body style="width:185px;height: 100px;">
    <b class="text">这里是popup页面b>
body>
html>