本文已参加「新人创作礼」活动，一起敞开创作之路。

chrome拓宽文档参阅:

  1. developer.chrome.com/docs/extens…
  2. www.kkh86.com/it/chrome-e…
  3. blog.haoji.me/chrome-plug…
  4. chrome.cenchy.com/getstarted.…

关于chrome拓宽：

关于chrome拓宽，也有的人称为chrome插件，英文官方名称为Chrome extensions，在此作者将运用拓宽称号，不多做纠结，原生开发中大多数运用是html、json、js、css等文件，个人认为chrome拓宽关于前端开发是较为友爱。笔者本身便是前端，因而在下方描绘时将默许大家都对前端有所研究，提早对不能照顾到的人说声抱歉。

实践开发：

刨除你的拓宽上线发布流程外，完好的开发调试流程如下：

  1. 新建文件夹，在文件夹根目录中放置你的manifest.json文件，并环绕该文件放入你自己需求的内容。

  2. 完结开发后在chrome浏览器中进入拓宽程序

    关于chrome拓展开发的实践与思考(一)

  3. 在右上角你能够看到开发者模式开关，将它翻开

    关于chrome拓展开发的实践与思考(一)

  4. 随后点击左上角呈现的【加载已解压的拓宽程序】，挑选你的拓宽程序根目录即可。

  5. 随后你能够看到你的拓宽程序呈现。

  6. 在浏览器右上角你也能够看的你的拓宽icon

    关于chrome拓展开发的实践与思考(一)

整个结构需求基于名为【manifest】的json文件进行开发，你能够理解为它是咱们与chrome的桥梁，chrome经过读取该文件的内容来实现咱们拓宽的功用与展现，manifest.json的装备单部分内容如下：

{
 "manifest_version": 2,
  //告诉chrome需求用哪个版本来解析咱们的文件，现在有且只要2与3，两者差异在于manifest的部分装备写法不同，笔者将在下文中进行举例，在本次实践中运用的是2.
  
 "name": "FxExtensions",//给你的拓宽起个姓名，能够为中文。
 "description": "it is a description",//对这个拓宽进行一些描绘。
 "version": "1.0",//你的拓宽的版本号，一般只要拓宽上线市场时才会用到，自己本地文娱无需介意。
​
 "icons": {
  //此为你在拓宽程序主页面展现的icon
   "16":'image/icon.png',//能够设置不同尺寸关于不同的icon。
   "48":'image/icon.png',
   "128":'image/icon.png'
  },
  
 "browser_action": {
  // 浏览器右上角图标设置，browser_action、page_action、app必须三选一，前两者差异为，browser为一切网站常驻且常量(icon不为灰色),page为只在特定网站常量，其他时刻为灰色(能够理解为不行运用状况),但二者可装备项完全一致，笔者考虑是否page_action还有额定的装备项如：装备哪个页面为可运用状况。但查阅官方文档 发现并没有如笔者所想，装备哪个页面为可运用状况需求用写在background.js(下文会对此阐明)的chrome.api来进行调用，因而笔者觉得有些不合理性，在manifest_version为3的版本中，browser_action与page_action也确实统一运用单action字段，不再区分二者，关于app，笔者在查阅中发现与前两者相差较大，且运用人数貌不是很多，因而在此小挖一坑，日后来填，感兴趣的可自行查阅。
  "default_icon": "image/icon.png",//此为你在浏览器右上角显现的icon
  "default_popup": "popup.html",//当你点击浏览器右上角显现的icon时(不为灰状况),弹出的展现页面
  "default_title": "鼠标悬浮展现内容"//鼠标悬浮在icon时显现的title文字。与image标签的title属性类似。
  },
  
 "background":{
  //常驻后台的JS或许页面，一般为JS，，该装备如它的姓名一样，在背后默默支持，一般会在浏览器敞开时开端执行，浏览器封闭后结束，一般用来跑一些程序函数等，在下文中会有具体阐明。
        "page": "background.html"//2种指定方式，假如指定JS，那么会自动生成一个背景页
        //"scripts": ["js/background.js"]
    },
  
    "content_scripts":[
   // 需求直接注入页面的JS，该内容会在下文与background一起阐明。
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表明匹配一切地址
            "matches": ["<all_urls>"],
            // 多个JS按次序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入能够随意一点，可是CSS的留意就要千万当心了，因为一不当心就可能影响大局款式
            "css": ["css/custom.css"],
            "run_at": "document_start"
      // 代码注入的时刻，可选值： "document_start", "document_end", or "document_idle"，最后一个表明页面空闲时，默许document_idle
        },
    ],
  
​
    "permissions":[
   //权限恳求，当你想要运用chrome供给的api才能时，你需求向chrome"报备"，该数组便是报备列表。假如不需求它的才能，就不需求写该装备。
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 告诉
        "webRequest", // web恳求
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*", // 能够经过executeScript或许insertCSS访问的网站
        "https://*/*" // 能够经过executeScript或许insertCSS访问的网站
    ]
  //除此之外还有很多装备项，在此不一一列举，感兴趣的可自行查阅
  //version3:https://developer.chrome.com/docs/extensions/mv3/manifest
  //version2:https://developer.chrome.com/docs/extensions/mv2/manifest
}

接下来咱们进行一个最小本钱最少装备的开发，manifest.json如下：

{
 "manifest_version": 2,
 "name": "FxExtensions",
 "description": "it is a description",
 "version": "1.0",
 "icons": {
  "16":"image/icon.png",
  "48":"image/icon.png",
  "128":"image/icon.png"
  },
 "browser_action": {
  "default_icon": "image/icon.png",
  "default_popup": "popup.html",
  "default_title": "鼠标悬浮展现内容"
  }
}

能够看到，整个装备单只要根本的装备项，不包括background,permissions,content_scripts等参数。在装备单上咱们能够看到，装备上指向了两个文件，一个是icon，另一个是html文件，因而咱们还需求一个icon.png以及一个popup.html。整个目录结构如下

关于chrome拓展开发的实践与思考(一)

出于便于后期保护以及代码的洁净整齐，咱们将未来可能用到的内容新建文件夹，便于后续办理，实践不运用文件夹一股脑放在根目录也是能够，icon.png放在了image文件夹下，icon大小官方建议大概是19px*19px。接下来咱们编辑popup.html的内容，一步一步来，咱们先做到根本静态展现，html代码示例如下：

<!DOCTYPE html>
<html>
​
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
   *{
   padding: 0;
   margin: 0;
   }
  .popup-main{
   background-color: #ecf5ff;
   padding: 8px;
   height: 150px;
   overflow: hidden;
   }
  .popup-avatar{
   margin: 0 auto;
   width: 100px;
   height: 100px;
   border-radius: 4px;
   overflow: hidden;
   }
  .popup-image{
   width: 100px;
   height: 100px;
   }
  </style>
</head>
​
<body>
 <main class="popup-main">
  <div class="popup-avatar">
   <img class="popup-image" src="image/avatar.png" alt="">
  </div>
 </main>
</body>
​
</html>

能够看到，整个html的功用是展现了一个名为【avatar】的图片，并在款式进步行了修改。avatar读者能够自行随意挑选一个你有的图片放在image文件夹下，笔者在此不做供给。完结整个代码编写后，参照上文提到的打包流程，点击【加载已解压的拓宽程序】按钮，挑选新建的文件夹，理论上你就会看到你的拓宽程序加载成功了。

关于chrome拓展开发的实践与思考(一)

在浏览器右上角左键点击你的icon，弹出内容大致如下：

关于chrome拓展开发的实践与思考(一)

你也能够右键单击弹出内容，审查元素，即咱们常用的F12。

关于chrome拓展开发的实践与思考(一)

假如你成功呈现了该步骤，阐明现在你的操作是正确的，假如你没能在右上角找到你的icon,不妨点击这里看看是否没有将它常驻在浏览器上。

关于chrome拓展开发的实践与思考(一)

至此，最根本的拓宽功用便已经完结。不妨对这个页面进行你的个性化改动，打造归于你的拓宽页面。

tips: 更改代码后无需重新打包，只需在拓宽页面点击左上角【更新】按钮并刷新浏览器即可(有时候这两个步骤也不需求，只需求点击右上角插件icon再次敞开封闭即可)