入门系列2 - 给浏览器插件增长逻辑

时间 2019-11-16

标签入门系列浏览器插件增长逻辑栏目浏览器繁體版

原文原文链接

前言

😋😋😋嘿，各位好~~css

上一节写者简单的介绍了一下如何从0开发一个无JS逻辑的hello extension插件，可是大多数插件都不仅是静态页面，想要赋能，还得存在逻辑。html

Chrome 插件是由不一样但相互联系的组件构成。组件能够包括后台脚本，内容脚本，选项页面，UI元素和各类逻辑文件。jquery

Chrome 插件是由Web技术建立：HTML、CSS、JavaScript。插件的组件构成将取决于其功能，而不须要编写全部组件。web

那写者就从input开始吧~chrome

数据状态保存功能实现

建立manifest.json

编写插件首先建立manifest.json文件npm

{
    "manifest_version": 2,
    "name": "数据记录",
    "version": "1.0",
    "description": "使用background实时记录数据"
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "imgs/16.png",
            "32": "imgs/32.png",
            "48": "imgs/64.png",
            "128": "imgs/128.png"
        }
    },
}
复制代码

popup.html 和 popup.js

为了code方便，这里引用了jqueryjson

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="http://open.sojson.com/jquery/jquery-3.2.1.min.js"></script>
    <script src="popup.js"> </script>
</head>
<body style="width:300px ;height:300px">
    <h1>数字改变</h1>
    <input type="text" id="input" value="0">
    <button id="btn">+1</button>
</body>
</html>
复制代码

let count = 0;
$(function(){
    $('#input').val(count);
    $('#btn').click(function(){
        count = count+1;
        $('#input').val(count);
    });
})
复制代码

至此，安装插件，并点击+1按钮，input内容会发生变化。数组

可是，注意~~浏览器

当关闭插件弹窗而且从新打开的时候，数字又从新变为0了。这不是好事，由于插件并无保存用户使用的状态，想要解决问题，咱们但愿能有一个相似网站的后台专门存储数据，或者保存状态。这时候background字段就能够闪亮登场了~网络

添加 background

在manifest添加background字段，同时引入background.js文件。

{
    "background": { // 可选属性
        "scripts": [
            "background.js"
        ],
        "persistent": false // 非持久
    },
}
复制代码

background在manifest中是可选字段，注册background，能够理解为插件注册一个运行在浏览器中的后台脚本/网站，并将分析注册的脚原本查找它须要监听的事件等，与当前浏览页面无关。persistent属性代表脚本的持久性。

background

backgrounnd存在如下几个属性：

page. 后台脚本主页。在这个主页中，有引用的脚本，其中通常都会有一个专门来管理插件各类交互以及监听浏览器行为的脚本，通常都起名为background.js。
scripts. 若是page不存在html文件引入，则scrits须要引入肯定的脚本。若是page存在html文件引入，则在page中引入公共脚本，好比aixos，jquery等
persistent. [true|false]，后台脚本的后台页面和事件页面的分别表示。当为true，则表示为持久运行脚本，生命周期与浏览器相同；当为false，表示非持久性脚本，页面活动时运行，不运行则几秒后自动杀死活动，释放系统资源。当再须要再重载。

写者建议通常使用false，避免浪费系统资源。持久性的插件通常都是插件须要使用chrome.webRequest API来阻止或修改网络请求。

backgroundJS 编写

既然background可以存储状态，所以这里咱们只须要增长一行代码便可

var count = 0
复制代码

注意这里使用的是var，而不是let，background是一个后台页面，let造成块级做用域。所以会访问不到变量。

至此，咱们刷新插件，经过点击+1按钮，同时关闭在打开插件弹窗，数据状态会保存。

恭喜💐，咱们已经能够在页面中增长逻辑并能经过background配置，保存状态了~

给网页注入点你的灵感

上google搜索一下funny chrome extension，会发现不少有趣的插件，好比在整个页面中加上一层滑稽狗，这其实是在网页中注入了脚本。那应该浏览器插件怎么去实现脚本注入呢？答案就是Content scripts。

Content scripts

插件经过Content Scripts本对浏览器当前访问页面进行读写操做。Content Scripts包含在已加载到浏览器中的页面的上下文中执行的JavaScript。Content Scripts能够读取和修改浏览器当前访问页面DOM。

经过使用storage API和来交换信息和存储值，Content Scripts能够与插件进行通讯。

切换你的电脑页面，转到vscode，给插件库增长一个content.js：

$('button').css('background', 'green')
复制代码

给npm官网的search按钮添加个“生活过得去颜色“，配置manifest，添加content_scripts字段:

{
    ... // 省略
    "content_scripts": [ // 数组，不一样页面注入策略会有所不一样
    {
      "matches": [
        "https://www.npmjs.com/*"
      ],
      "js": ["jquery-2.1.3.min.js", "content.js"]
    }
}
复制代码

这里matches表示插入知足数组元素的站点，js表示须要插入的脚本，从左往右持续加载，这里由于使用了jQuery，所以也引入了.

大功告成，刷新插件，进入npmjs官网，会发现search按钮变绿了，代表注入脚本成功。

总结

经过对插件增长逻辑的介绍，能够看到chrome 插件核心就是三个部分：

popup
content scripts
background

下一节，将从chrome插件通讯角度出发，介绍这三个核心部分是如何进行通讯。

晚安·~