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

Rabbitzzc
1,553 阅读4分钟

前言

😋😋😋嘿，各位好~~

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

Chrome 插件是由不同但相互联系的组件构成。组件可以包括后台脚本，内容脚本，选项页面，UI元素和各种逻辑文件。

Chrome 插件是由Web技术创建：HTML、CSS、JavaScript。插件的组件构成将取决于其功能，而不需要编写所有组件。

那写者就从input开始吧~

数据状态保存功能实现

创建manifest.json

编写插件首先创建manifest.json文件

{
    "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方便，这里引用了jquery

<!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插件通信角度出发，介绍这三个核心部分是如何进行通信。

晚安·~

avatar
文章
阅读
粉丝