Chrome插件-一一网

1.什么是Chrome插件

  在我们的日常开发过程中，我们会在浏览器上安装很多有利于我们开发或者说更方便于使用chrome浏览器的插件，那么到底什么是chrome插件呢？ 其实Chrome插件就是一个用Web技术开发、用来增强浏览器功能的扩展程序，所以也许‘chrome扩展’比‘chrome插件’更贴切于它的意义。
复制代码

开发初体验

1.本地创建一个文件及：test

2.在test文件夹中，创建manifest.json。任何插件都必须要有这个文件，用来描述插件的配置信息

{
    "name": "test",
    "description" : "this is test",
    "version": "0.0.1",
    "manifest_version": 2,
  }

复制代码

定义当前插件名，描述信息，以及版本号等

3.给插件加一个浏览器右上角的icon

 这里可以自定义图标图片
复制代码


{
     "name": "Hello Extensions",
    "description" : "Hello world Extension",
    "version": "1.0",
    "manifest_version": 2，

     "browser_action":
      {
      "default_icon": "./icons/16.png",
      "default_title": "这是一个示例Chrome插件",
      "default_popup": "index.html"
      }
}

复制代码

并且还可以给它一个点击之后默认的弹出内容，如index.html中

在这里插入图片描述

然后我们就可以简单的来测试下我们刚刚写的小demo了

打开我们的chrome插件扩展，将我们写的test文件夹直接拖进来，然后你会发现在你的扩展器内多了一个名叫test的插件，如图：

在这里插入图片描述

这个时候，我们可以把该插件固定在我们浏览器的右上角，点击的时候会发现，弹框中的内容就是我们刚刚index中的写的内容哦，样式可以自行修改的。
在这里插入图片描述

3.核心配置的介绍

1.manifest.json

  这是一个Chrome插件必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。

 下面是一些常见的配置：
复制代码

   

{
 // 清单文件的版本，这个必须写，而且必须是2
 "manifest_version": 2,
 // 插件的名称
 "name": "demo",
 // 插件的版本
 "version": "1.0.0",
 // 插件描述
 "description": "简单的Chrome扩展demo",
 // 图标，一般偷懒全部用一个尺寸的也没问题
 "icons":
 {
 "16": "img/icon.png",
 "48": "img/icon.png",
 "128": "img/icon.png"
 },
 // 会一直常驻的后台JS或后台页面
 "background":
 {
 // 2种指定方式，如果指定JS，那么会自动生成一个背景页
 "page": "background.html"
 //"scripts": ["js/background.js"]
 },
 // 浏览器右上角图标设置，browser_action、page_action、app必须三选一
 "browser_action": 
 {
 "default_icon": "img/icon.png",
 // 图标悬停时的标题，可选
 "default_title": "这是一个示例Chrome插件",
 "default_popup": "popup.html"
 },
 // 当某些特定页面打开才显示的图标
 /*"page_action":
 {
 "default_icon": "img/icon.png",
 "default_title": "我是pageAction",
 "default_popup": "popup.html"
 },*/
 // 需要直接注入页面的JS
 "content_scripts": 
 [
 {
 //"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"],
 // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
 "run_at": "document_start"
 },
 // 这里仅仅是为了演示content-script可以配置多个规则
 {
 "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
 "js": ["js/show-image-content-size.js"]
 }
 ],
 // 权限申请
 "permissions":
 [
 "contextMenus", // 右键菜单
 "tabs", // 标签
 "notifications", // 通知
 "webRequest", // web请求
 "webRequestBlocking",
 "storage", // 插件本地存储
 "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
 "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
 ],
 // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
 "web_accessible_resources": ["js/inject.js"],
 // 插件主页，这个很重要，不要浪费了这个免费广告位
 "homepage_url": "https://www.baidu.com",
 // 覆盖浏览器默认页面
 "chrome_url_overrides":
 {
 // 覆盖浏览器默认的新标签页
 "newtab": "newtab.html"
 },
 // Chrome40以前的插件配置页写法
 "options_page": "options.html",
 // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
 "options_ui":
 {
 "page": "options.html",
 // 添加一些默认的样式，推荐使用
 "chrome_style": true
 },
 // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
 "omnibox": { "keyword" : "go" },
 // 默认语言
 "default_locale": "zh_CN",
 // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
 "devtools_page": "devtools.html"
}
复制代码

content-scripts

需要直接注入页面的文件，借助content-scripts我们可以实现通过配置的方式向指定的页面中注入JS和CSS


{
 // 需要直接注入页面的JS
 "content_scripts": 
 [
 {
 //"matches": ["http://*/*", "https://*/*"],
 "matches": ["<all_urls>"],// 表示匹配所有地址
 // 多个JS按顺序注入
 "js": ["js/xxx.js", "js/xx.js"],
 // CSS要注意顺序，因为一不小心就可能影响全局样式
 "css": ["css/xx.css"],
 // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
 "run_at": "document_start"
 }
 ],
}
复制代码

background

是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

配置中，background可以通过page指定一张网页，也可以通过scripts直接指定一个JS，Chrome会自动为这个JS生成一个默认的网页：

{
 // 会一直常驻的后台JS或后台页面
 "background":
 {
 // 如果指定JS，那么会自动生成一个背景页
 "page": "background.html"
 //"scripts": ["js/background.js"]
 },
}
复制代码

chrome的展示形式

这里给大家介绍几种较为常见的展示形式

1.浏览器右上角
```
    通过配置browser_action可以在浏览器的右上角增加一个图标，我们上面的小demo已经使用了，所以就不做详细说明了
复制代码
```
1. 右键菜单
  
  通过开发Chrome插件可以自定义浏览器的右键菜单，主要是通过chrome.contextMenusAPI实现

     

// manifest.json
{
"permissions": ["contextMenus"， "tabs"],
"background":{
      "scripts": ["js/background.js"]
      }
}
// background.js
chrome.contextMenus.create({
 title: '使用度娘搜索：%s', // %s表示选中的文字
 contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单
 onclick: function(params)
 {
 // 注意不能使用location.href，因为location是属于background的window对象
 chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
 }
});
复制代码

在这里插入图片描述

3.devtools(开发者工具)

我们应该在开发的过程中都用过这样的插件
在这里插入图片描述

我们自己的插件其实也是可以插入到这个位置的，具体做法如下

在manifest.json中：


{
 // 只能指向一个HTML文件，不能是JS文件
 "devtools_page": "devtools.html"
}
复制代码

新建文件devtools.html

<!DOCTYPE html>
<html>
<head></head>
<body>
 <script type="text/javascript" src="js/devtools.js"></script>
</body>
</html>
复制代码

新建devtools.js

//MyTest 插件名，index.html 插件展示的内容
chrome.devtools.panels.create('MyTest', 'icons/crm.png', 'index.html', function(panel)
{
 console.log('自定义面板创建成功！');
});
复制代码

获取当前窗口ID

     

chrome.windows.getCurrent(function(currentWindow)
{
 console.log('当前窗口ID：' + currentWindow.id);
});
复制代码

6.获取当前选项卡id


// 获取当前选项卡ID
function getCurrentTabId(callback)
{
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
 {
 if(callback) callback(tabs.length ? tabs[0].id: null);
 });
}

复制代码

7.本地存储

我们在开发中使用的本地存储一般都是sessionStorage或者localStorage等，在chrome的插件开发中，比较建议使用chrome.storage，理由如下：

chrome.storage是针对插件全局的，即使你在background中保存的数据，在content-script也能获取到
chrome.storage.sync可以跟随当前登录用户自动同步，这台电脑修改的设置会自动同步到其它电脑，很方便，如果没有登录或者未联网则先保存到本地，可以等登录了再同步至网络

// 读取数据，第一个参数是指定要读取的key以及设置默认值
chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
 console.log(items.color, items.age);
});
// 保存数据
chrome.storage.sync.set({color: 'blue'}, function() {
 console.log('保存成功！');
});
复制代码