chrome 插件开辟入门

1. 先容

Chrome 插件可用于在谷歌欣赏器上控制当前页面的一些操纵，可自主控制网页，提升服从。
平常我们可在谷歌应用市肆中下载谷歌插件来增强欣赏器功能，作为开辟者，我们也可以自己开辟一个欣赏器插件来共同我们的一样平常学习工作，提升幸福感。
在谷歌插件开辟者官网，可以阅读插件开辟文档来写插件，插件开辟重要是 JavaScript，因此对前端开辟者很友好
2. 快速入门

2.1 manifest.json 设置

  

• 新建一个文件夹，就叫 ChromePlugin
    
  
• 在 ChromePlugin 根目次下新建 manifest.json 文件
  
  

   manifest 文件是插件的设置文件，只有在该 json 文件中增长了设置项，才答应增长自界说的内容，下面是常见的 json 文件设置

1. {
2.    
3.    
4.     "manifest_version": 3,
5.     "name": "chromePlugin",
6.     "version": "1.0.0",
7.     "description": "我的第一个谷歌插件",
8.     "icons": {
9.    
10.    
11.         "16": "./assets/images/icon16.png",
12.         "32": "./assets/images/icon32.png",
13.         "48": "./assets/images/icon48.png",
14.         "128": "./assets/images/icon128.png"
15.     },   
16. }

复制代码

  根本设置：
  

   

• manifest_version：manifest 的版本，是谷歌针对插件开辟的版本设置，现在主流都是 3 版本，2 版本已经制止更新   
  
• name：插件的名称，即插件在谷歌市肆以及使用时的名称   
  
• version：插件的版本   
  
• description：插件的形貌信息   
  
• icons：形貌插件图标的巨细和文件路径，目条件供 4 种规格的图片，按照上述设置分别传入差异巨细的图片即可，图片所在可在根目次下创建一个 assets文件放置静态资源  
  

  其他设置可见下文中的具体表明
  到这里，一个 chrome 插件已经可以被加载出来了
打开谷歌欣赏器，输入 chrome://extensions ，启用开辟者模式(右上角)，再点击「加载已解压的扩展步伐」然后找到 ChromePlugin 这个文件夹打开，便可以将这个插件加载进来了，只不外当前插件没有任何功能，以是也是灰色的

2.2 action 设置

   在 manifest.json 中除了上述的底子设置外，还可设置 action，action 字面上意思就是我们点击右上角的插件图标时的反应，比如打开一个交互面板等等。这种交互的聚集就是 action。
  起首先在 manifest.json 中设置 action，可见官网针对 action 的设置信息，action设置。
   default_popup 可在点击插件图片时弹出一个弹层，弹层的内容就是 default_popup 所对应的 html 文件。

1. {
2.    
3.    
4.     "manifest_version": 3,
5.     "name": "chromePlugin",
6.     "version": "1.0.0",
7.     "description": "我的第一个谷歌插件",
8.     "icons": {
9.    
10.    
11.         "16": "./assets/images/icon16.png",
12.         "32": "./assets/images/icon32.png",
13.         "48": "./assets/images/icon48.png",
14.         "128": "./assets/images/icon128.png"
15.     },
16.     "action": {
17.    
18.    
19.         "default_title": "Click Me",
20.         "default_popup": "./action/index.html",
21.         "default_icon": "./assets/images/icon32.png"
22.     }   
23. }

复制代码

可在根目次下新建一个 action 文件夹，然后再创建一个 index.html 文件，写一个简朴的测试文件

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>Document</title>
7.     <style>
8.         .hello {
9.      
10.      
11.             width: 100px;
12.         }
13.     </style>
14. </head>
15. <body>
16.     <div

复制代码