入門系列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按鈕變綠了，代表注入腳本成功。