先上主菜-manifest

Chrome插件的一切顺利运行需要一个配置，它叫manifest，是json格式的文件。内容格式如下：

{
  "name": "My Extension", // 插件名称，字符串类型
  "version": "1.0.0",  // 插件版本号，字符串类型
  "manifest_version": 2 // manifest.json 文件版本号。必须设置为2。
  "description": "This is my first extension.", // 插件描述，字符串类型
  "icons": {
    "16": "icon16.png",  // 16x16 像素的图标文件路径
    "32": "icon32.png",  // 32x32
    "48": "icon48.png",  // 48x48
    "128": "icon128.png" // 128x128
  },
  "browser_action": {   // 浏览器动作，该字段用于定义当用户单击浏览器操作按钮时执行的操作
    
  },
  "content_scripts": [ // 内容脚本，该字段定义了将应用于哪些网站，以及应用程序如何与网站交互
    {
      
    }
  ],
  "permissions": [ // 权限，该字段定义了插件需要访问的资源和功能，例如浏览器标签、存储、网络等等。
    
  ],
  "background": { // 后台脚本，该字段在后台长时间运行的脚本，也称为持久化背景页
   
  }
}

以上是一个manifest配置文件的主要格式。其中name、version、manifest_version是必填项。

1.细说icons

{
    "icons": {
        "16": "icon16.png", // 16x16 像素的图标文件路径 
        "32": "icon32.png", // 32x32 像素的图标文件路径 
        "48": "icon48.png", // 48x48 像素的图标文件路径 
        "128": "icon128.png" // 128x128 像素的图标文件路径
    }
}

这个字段主要配置的是插件在工具栏的icon以及插件面板的icon。截图如下,红框内的icon。

2.细说browser_action

browser_action是manifest的一个可选字段，定义插件在浏览器中的操作按钮。当用户点击该按钮时，可以打一个弹窗来执行某些操作，例如显示插件的设置页面，执行搜索操作。配置内容如下：

{
    "browser_action": { // 浏览器动作，该字段用于定义当用户单击浏览器操作按钮时执行的操作 
        "default_icon": "icon.png", // 默认图标的文件路径
        "default_title": "My Extension", // 鼠标指针悬停在浏览器操作按钮上显示的默认标题 
        "default_popup": "popup.html" // 弹出窗口的 HTML 文件路径
    }
}

3.细说content_scripts

{
    "content_scripts":[
        { 
            "matches": ["<all_urls>"], //匹配所有的url
            "css": ["css/mystyles.css"], 
            "js": ["lib/jquery-3.3.1.min.js", "js/content.js"] 
        }
    ]
}

content_scripts字段是注入开发者开发的脚本，例如，js脚本、css文件。matches指定需要注入脚本的url（页面）。<all_urls>是匹配所有的链接，只要打开页面就会注入。比如划词翻译。

4.细说permissions

permissions,插件开发过程中有时候需要一些浏览器的权限，那么就需要在manifest中先申请。用户在安装插件时会被提示授予这些权限。

{
    "permissions": ["tabs", "contextMenu", "storage", "proxy"],
}
//对权限的访问主要是在background-后台js中， 如下：
chrome.contextMenu.create();
//存储数据
chrome.storage.local.set({test: 123}, function() {
    console.log('data saved');
});

tabs-获得激活的页签 contextMenu-获取右键菜单的权限-添加一些插件的菜单。 storage-插件使用存储，但是这个存储是和浏览器的存储是有区别的。 proxy-涉汲到是请求相关的代理的权限

5.background-后台控制

{
    "background": {
        "scripts": [ 
            "background.js" //可以是其它名字，自定议
        ], 
        "persistent": false 
    }
}

主要是运行插件的后台脚本，它是chrome插件的核心文件之一，负责处理后台运行的任务和逻辑。它可以实现以下功能：

后台数据处理
与浏览器交互
数据存储和共享
与其它组件通信

chrome.contextMenu.create();
//存储数据
chrome.storage.local.set({test: 123}, function() {
    console.log('data saved');
});
//读取数据
chrome.storage.local.get('test', function(value) {
    console.log('===> ', result.test);
});

浅谈chrome的插件