Chrome 插件開(kāi)發(fā)入門（一）

前言

關(guān)于Chrome插件，大家可能或多或少的都會(huì)使用幾個(gè)，比如廣告屏蔽插件AdBlock，大名鼎鼎的腳本管理插件 Tampermonkey(油猴)等，這些插件給予了我們?nèi)粘Ｊ褂脼g覽器很大的方便。那如何開(kāi)發(fā)一個(gè)自己的插件呢，最近我研究了Google插件開(kāi)發(fā)文檔和網(wǎng)絡(luò)上的一些文檔，整理了開(kāi)發(fā)筆記。由于Google在推廣V3版本的插件，這里就使用最新的V3版本做研究。

1 插件結(jié)構(gòu)概述

在開(kāi)發(fā)插件之前，先了解一下Chrome插件的結(jié)構(gòu)和基本概念是很有必要的。下面就介紹一下幾個(gè)基本概念。

1.1 Chrome插件的結(jié)構(gòu)

alt Architecture

1.2 基本概念

1.2.1 Manifest

Manifest(manifest.json) 是 Chrome 插件的配置文件，類似于前段工程中的 webpack.config.js或者后端maven項(xiàng)目中的pom.xml。它是一個(gè)json文件，必須位于插件項(xiàng)目的根目錄中，而且名稱必須是 manifest.json。Manifest 記錄著重要的元數(shù)據(jù)，定義資源，聲明權(quán)限，并標(biāo)識(shí)哪些文件在后臺(tái)和頁(yè)面上運(yùn)行。下面列出一些重要的配置項(xiàng)。全部配置項(xiàng)可以查看官方文檔： https://developer.chrome.com/docs/extensions/mv3/manifest/

{
  // 必須項(xiàng)
  "manifest_version": 3, // 版本, V3是Chrome最新插件版本，類似前段node的版本或后端jdk版本
  "name": "My Extension", // 插件名稱
  "version": "1.0.1",     // 插件版本

  // 推薦項(xiàng)目
  "action": {...},  // 用于點(diǎn)擊圖標(biāo)彈出框，對(duì)于彈出框接受的是html文件
  "description": "A plain text description", // 插件描述
  "icons": {...}, // 插件圖標(biāo)

  // 可選項(xiàng)(重要， 可選不表示不重要)
  "author": "developer@example.com",  // 插件作者
  "commands": {...}, // 使用命令 API 添加觸發(fā)擴(kuò)展中操作的鍵盤快捷鍵
  "background": {...}, // Service Worker 配置
  "content_scripts": [{...}], // 內(nèi)容腳本配置
  "options_page": "options.html", // options_page 配置
  "permissions": ["..."], // 插件需要使用的權(quán)限
  "version_name": "1.0 beta",
  "web_accessible_resources": [...] // Web 可訪問(wèn)資源配置
}

1.2.2 Service Worker

Service Worker 是一個(gè)事件處理器，它可以監(jiān)聽(tīng)瀏覽器事件，例如導(dǎo)航到新頁(yè)面、刪除書簽或關(guān)閉選項(xiàng)卡等，一旦這些事件觸發(fā)，則 Service Worker 中注冊(cè)的事件處理器就會(huì)被調(diào)用。需要明確的是，這里的事件是瀏覽器的事件，并不是頁(yè)面文檔中js的事件(例如，鼠標(biāo)點(diǎn)擊事件，滑動(dòng)事件)。Service Worker 有獨(dú)立的運(yùn)行環(huán)境，和頁(yè)面js的運(yùn)行環(huán)境是隔離的，所以它不能訪問(wèn)頁(yè)面的DOM，但是它可是使用Chrome的API。

1.2.3 Content Script

Content Script 又叫 ”內(nèi)容腳本“，它運(yùn)行在網(wǎng)頁(yè)上下文中，能夠?qū)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">DOM進(jìn)行訪問(wèn)和修改，或者將頁(yè)面信息傳遞給插件的其他部分，如 Service Worker，Popup Page。雖然 Content Script 運(yùn)行在網(wǎng)頁(yè)上下文中，但是它和頁(yè)面引入的js運(yùn)行環(huán)境是隔離的，也就是說(shuō)，它不能訪問(wèn)頁(yè)面定義的變量和方法。

1.2.4 Popup Page

Popup Page 又叫”彈出頁(yè)“，是點(diǎn)擊插件圖標(biāo)是彈出的頁(yè)面，如下圖：

它和普通web頁(yè)面很相似，可以有自己的js和css，但是不允許內(nèi)聯(lián)js代碼。彈出頁(yè)和普通web不同的地方是，彈出頁(yè)的js可是使用Chrome的API，但是它和內(nèi)容腳本一樣，不能訪問(wèn)普通頁(yè)面的DOM和普通頁(yè)面引入js。

1.2.5 Options Page

Options Page 又叫”選項(xiàng)頁(yè)“，顧名思義，它是插件的配置頁(yè)面，用戶在該頁(yè)面可以對(duì)插件進(jìn)行設(shè)置。

我們先對(duì)這些基礎(chǔ)知識(shí)有個(gè)基本概念，后面會(huì)詳細(xì)說(shuō)明它們的使用方式，給出相應(yīng)的 Demo。

2 入門小插件

為了讓我們能夠快速上手開(kāi)發(fā)一個(gè)自己的插件，這節(jié)我們就開(kāi)發(fā)一個(gè)小插件。這個(gè)插件功能是和 選詞翻譯 插件功能類似，鼠標(biāo)選中頁(yè)面中的文本，彈出一個(gè)提示框，顯示翻譯翻譯后的內(nèi)容。我們這個(gè)插件功能是頁(yè)面選中文本，點(diǎn)擊鼠標(biāo)右鍵彈出選中文本，不做翻譯的功能。效果演示

2.1 插件項(xiàng)目結(jié)構(gòu)

└── src
    ├── icons
    │   └── logo.png
    ├── manifest.json
    └── scripts
        ├── content.js
        └── lib
            └── jQuery.js

我們插件項(xiàng)目結(jié)構(gòu)和 Chrome 官方項(xiàng)目結(jié)構(gòu)保持一致：

icons 存放插件圖標(biāo)
manifest.json 插件清單，配置文件
scripts 存放 content scripts 和依賴的庫(kù)

2.2 項(xiàng)目代碼

2.2.1 manifest.json

{
  "manifest_version": 3,
  "name": "演示插件",
  "version": "1.0.0",
  "description": "這是一個(gè)演示插件",
  "icons": {
    "16": "/icons/logo.png",
    "32": "/icons/logo.png",
    "48": "/icons/logo.png",
    "128": "/icons/logo.png"
  },
  "content_scripts": [
    {
      "matches": [
        "https://*/*",
        "http://*/*",
        "file:///*"
      ],
      "js": [
        "scripts/lib/jQuery.js",
        "scripts/content.js"
      ],
      "run_at": "document_idle"
    }
  ]
}

manifest.json 主要關(guān)心一下配置項(xiàng)：

manifest_version 這是使用的V3版本。
name 給插件起個(gè)名字。
icons 插件圖標(biāo)。
content_scripts 配置內(nèi)容腳本怎么運(yùn)行。 matches 匹配路徑。內(nèi)容腳本在那個(gè)網(wǎng)站路徑頁(yè)面上運(yùn)行。 js 運(yùn)行那些內(nèi)容腳本。需要注意js之間的依賴關(guān)系，被依賴的js放在前面。這里 content.js 使用了 jQuery，所以jQuery 引入位置在 content.js之前。 run_at 腳本注入時(shí)機(jī)。取值有 document_start, document_end, document_idle, 默認(rèn)是 document_idle。 document_start: 在構(gòu)建DOM和運(yùn)行頁(yè)面js之前注入。document_end: 在DOM構(gòu)建完成后，圖片和frames加載之前注入。document_idle: 在 document_end 和 window.onload事件之間注入。

2.2.2 content.js

/**
 * 顯示提示框
 *
 * @param {*} e 鼠標(biāo)點(diǎn)擊事件
 * @param {*} tip 顯示的文本內(nèi)容
 */
function showTip(e, tip) {
    $('#tipId').html(tip);
    $('#tipDiv').css('left', e.pageX + 'px');
    $('#tipDiv').css('top', e.pageY + 10 + 'px');
    $('#tipDiv').css('display', 'block');
}

/**
 * 隱藏提示框
 */
function hiddenTip() {
    $('#tipDiv').css('display', 'none');
}

/**
 * 初始化事件監(jiān)聽(tīng)器
 */
function initEventListeners() {

    // 監(jiān)聽(tīng)鼠標(biāo)按下事件，關(guān)閉提示框
    document.addEventListener("mousedown", ()=> {
        hiddenTip();
    });

    // 在提示框內(nèi)點(diǎn)擊鼠標(biāo)，阻止提示框關(guān)閉
    $('#tipDiv').bind("mousedown", (e)=> {
        e.stopPropagation();
    })

    // 點(diǎn)擊鼠標(biāo)右鍵，彈出選擇的內(nèi)容
    document.oncontextmenu=(e)=> {
        // 獲取選中的內(nèi)容
        const selected=window.getSelection().toString();
        if (!selected) {
            return true;
        }

        // 顯示選中的內(nèi)容
        showTip(e, selected);
        return false;
    }
}

(()=> {
    // 頁(yè)面添加一個(gè)提示的div（tipDiv）， 用于彈出提示框
    $('body').append("<div id='tipDiv' style='position:absolute; float: left; z-index:1000; left: 0px; top: 0px; display: none; width: 600px; height: 100px;'></div>")

    // style 太長(zhǎng)了，分別設(shè)置css屬性
    $('#tipDiv').css('background-color', 'lightsteelblue');
    $('#tipDiv').css('font-size', '200%');

    // 在 tipDiv 中添加一個(gè) 內(nèi)容div, 用于放提示內(nèi)容
    $('#tipDiv').append("<div id='tipId'>測(cè)試彈出頁(yè)面</div>");

    // 初始化事件監(jiān)聽(tīng)器
    initEventListeners();
})();

content.js的代碼注釋寫的很清楚了，這里就不重復(fù)解釋代碼了。

2.2.3 安裝插件

3 總結(jié)

本文先介紹 Chrome 插件開(kāi)發(fā)過(guò)程中必備的基本概念，然后通過(guò)寫一個(gè)小Demo，來(lái)說(shuō)明如何開(kāi)發(fā)一個(gè) Chrome 插件，幫助大家快速入門。后面會(huì)再出進(jìn)階文章，對(duì) Content Script， Service Worker，Popup Page 等做進(jìn)一步研究。

eact Hooks已經(jīng)出了有段時(shí)間了，不知道大伙有沒(méi)有嘗試著去用過(guò)，下面小編帶大伙對(duì)比看下三大基礎(chǔ) Hooks 和傳統(tǒng) class 組件的區(qū)別和用法。

我們所指的三個(gè)基礎(chǔ) Hooks 是：

useState 在函數(shù)式組件內(nèi)維護(hù) state
useEffect 函數(shù)式組件內(nèi)有副作用的調(diào)用與 componentDidMount、componentDidUpdate 類似但又有所區(qū)別
useContext 監(jiān)聽(tīng) provider 更新變化

useState

useState 允許我們?cè)诤瘮?shù)式組件中維護(hù) state，傳統(tǒng)的做法需要使用類組件。舉個(gè)例子：我們需要一個(gè)輸入框，隨著輸入框內(nèi)容的改變，組件內(nèi)部的 label 標(biāo)簽顯示的內(nèi)容也同時(shí)改變。下面是兩種不同的寫法：

不使用 useState：

import React from "react";
// 1
export class ClassTest extends React.Component {
 // 2
 state={
 username: this.props.initialState
 }
 // 3
 changeUserName(val) {
 this.setState({ username: val })
 }
 // 4
 render() {
 return (
 <div>
 <label style={{ display: 'block' }} htmlFor="username">username: {this.state.username}</label>
 <input type="text" name="username" onChange={e=> this.changeUserName(e.target.value)} />
 </div>
 )
 }
}

我們需要定義一個(gè)類并從 React.Component 處繼承
還需要初始化一個(gè) state
初始化改變 state 的方法
最后還要使用 render 函數(shù)返回 JSX

使用 useState：

// 1
import React, { useState } from "react";
export function UseStateTest({ initialState }) {
 // 2
 let [username, changeUserName]=useState(initialState)
 // 3
 return (
 <div>
 <label style={{ display: 'block' }} htmlFor="username">username: {username}</label>
 <input type="text" name="username" onChange={e=> changeUserName(e.target.value)} />
 </div>
 )
}

在父組件中使用：

import React from "react";
// 引入組件
import { UseStateTest } from './components/UseStateTest'
// 4
const App=()=> (
 <div>
 <UseStateTest initialState={'initial value'} />
 </div>
)
export default App;

需要從 react 中引入 useState 這個(gè)包
使用 useState 方法，接收一個(gè)初始化參數(shù)，定義 state 變量，以及改變 state 的方法
在需要使用的地方直接使用 state 這個(gè)變量即可，增加事件處理函數(shù)觸發(fā)改變 state 的方法
在父組件中調(diào)用，通過(guò) props 傳遞 initialState 初始化值

用 useState 方法替換掉原有的 class 不僅性能會(huì)有所提升，而且可以看到代碼量減少很多，并且不再需要使用 this，所以能夠維護(hù) state 的函數(shù)式組件真的很好用

useEffect

useEffect 是專門用來(lái)處理副作用的，獲取數(shù)據(jù)、創(chuàng)建訂閱、手動(dòng)更改 DOM 等這都是副作用。你可以想象它是 componentDidMount 和 componentDidUpdate 及 componentWillUnmount 的結(jié)合。

舉個(gè)例子，比方說(shuō)我們創(chuàng)建一個(gè) div 標(biāo)簽，每當(dāng)點(diǎn)擊就會(huì)發(fā)送 http 請(qǐng)求并將頁(yè)面 title 改為對(duì)應(yīng)的數(shù)值：

import React from 'react'
// 1
import { useState, useEffect } from 'react'
export function UseEffectTest() {
 let [msg, changeMsg]=useState('loading...')
 // 2
 async function getData(url) { // 獲取 json 數(shù)據(jù)
 return await fetch(url).then(d=> d.json())
 }
 // 3
 async function handleClick() { // 點(diǎn)擊事件改變 state
 let data=await getData('https://httpbin.org/uuid').then(d=> d.uuid)
 changeMsg(data)
 }
 // 4
 useEffect(()=> { // 副作用
 document.title=msg
 })
 return (
 <div onClick={()=> handleClick()}>{msg}</div>
 )
}

首先從 react 中引入 useEffect
然后創(chuàng)建獲取數(shù)據(jù)的 getData 方法
創(chuàng)建事件處理函數(shù) handleClick
使用 useEffect 處理副作用：改變頁(yè)面的 title

如果使用傳統(tǒng)的類組件的寫法：

import React from 'react'
// 1
export class ClassTest extends React.Component {
 // 2
 state={
 msg: 'loading...'
 }
 // 3
 async getData(url) { // 獲取 json 數(shù)據(jù)
 return await fetch(url).then(d=> d.json())
 }
 handleClick=async ()=> { // 點(diǎn)擊事件改變 state
 let data=await this.getData('https://httpbin.org/uuid').then(d=> d.uuid)
 this.setState({ msg: data })
 }
 // 4
 componentDidMount() {
 document.title=this.state.msg
 }
 componentDidUpdate() {
 document.title=this.state.msg
 }
 // 5
 render() {
 return (
 <div onClick={this.handleClick}>{this.state.msg}</div>
 )
 }
}

首先創(chuàng)建類 ClassTest
初始化 state
定義獲取數(shù)據(jù)方法和事件處理函數(shù)
在 componentDidMount 和 componentDidUpdate 階段改變 document.title
最后通過(guò) render 函數(shù)渲染

使用 useEffect 不僅去掉了部分不必要的東西，而且合并了 componentDidMount 和 componentDidUpdate 方法，其中的代碼只需要寫一遍。

第一次渲染和每次更新之后都會(huì)觸發(fā)這個(gè)鉤子，如果需要手動(dòng)修改自定義觸發(fā)規(guī)則

見(jiàn)文檔：https://zh-hans.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

另外，官網(wǎng)還給了一個(gè)訂閱清除訂閱的例子：

使用 useEffect 直接 return 一個(gè)函數(shù)即可：

返回的函數(shù)是選填的，可以使用也可以不使用：

文檔：https://zh-hans.reactjs.org/docs/hooks-effect.html#recap

比方說(shuō)我們使用 useEffect 來(lái)解綁事件處理函數(shù)：

useEffect(()=> {
 window.addEventListener('keydown', handleKeydown);
 return ()=> {
 window.removeEventListener('keydown', handleKeydown);
 }
})

useContext

useContext 的最大的改變是可以在使用 Consumer 的時(shí)候不必在包裹 Children 了，比方說(shuō)我們先創(chuàng)建一個(gè)上下文，這個(gè)上下文里頭有一個(gè)名為 username 的 state，以及一個(gè)修改 username 的方法 handleChangeUsername

創(chuàng)建上下文

不使用 useState：

不使用 state hooks 的代碼如下：

import React, { createContext } from 'react'
// 1. 使用 createContext 創(chuàng)建上下文
export const UserContext=new createContext()
// 2. 創(chuàng)建 Provider
export class UserProvider extends React.Component {
 handleChangeUsername=(val)=> {
 this.setState({ username: val })
 }
 state={
 username: '',
 handleChangeUsername: this.handleChangeUsername
 }
 render() {
 return (
 <UserContext.Provider value={this.state}>
 {this.props.children}
 </UserContext.Provider>
 ) 
 }
}
// 3. 創(chuàng)建 Consumer
export const UserConsumer=UserContext.Consumer

看看我們做了什么：

首先我們使用 createContext 創(chuàng)建了上下文
然后我們創(chuàng)建 Provider；里頭定義了 handleChangeUsername 方法和 username 的 state，并返回一個(gè)包裹 this.props.children 的 Provider
最后我們?cè)俜祷?UserContext.Consumer

代碼比較冗長(zhǎng)，可以使用上文提到的 useState 對(duì)其進(jìn)行精簡(jiǎn)：

使用 useState：

使用 state hooks：

import React, { createContext, useState } from 'react'
// 1. 使用 createContext 創(chuàng)建上下文
export const UserContext=new createContext()
// 2. 創(chuàng)建 Provider
export const UserProvider=props=> {
 let [username, handleChangeUsername]=useState('')
 return (
 <UserContext.Provider value={{username, handleChangeUsername}}>
 {props.children}
 </UserContext.Provider>
 )
}
// 3. 創(chuàng)建 Consumer
export const UserConsumer=UserContext.Consumer

使用 useState 創(chuàng)建上下文更加簡(jiǎn)練。

使用上下文

上下文定義完畢后，我們?cè)賮?lái)看使用 useContext 和不使用 useContext 的區(qū)別是啥：

不使用 useContext：

import React from "react";
import { UserConsumer, UserProvider } from './UserContext'
const Pannel=()=> (
 <UserConsumer>
 {/* 不使用 useContext 需要調(diào)用 Consumer 包裹 children */}
 {({ username, handleChangeUsername })=> (
 <div>
 <div>user: {username}</div>
 <input onChange={e=> handleChangeUsername(e.target.value)} />
 </div>
 )}
 </UserConsumer>
)
const Form=()=> <Pannel></Pannel>
const App=()=> (
 <div>
 <UserProvider>
 <Form></Form>
 </UserProvider>
 </div>
)
export default App;

使用 useContext：

只需要引入 UserContext，使用 useContext 方法即可：

import React, { useContext } from "react"; // 1
import { UserProvider, UserContext } from './UserContext' // 2
const Pannel=()=> {
 const { username, handleChangeUsername }=useContext(UserContext) // 3
 return (
 <div>
 <div>user: {username}</div>
 <input onChange={e=> handleChangeUsername(e.target.value)} />
 </div>
 )
}
const Form=()=> <Pannel></Pannel>
// 4
const App=()=> (
 <div>
 <UserProvider>
 <Form></Form>
 </UserProvider>
 </div>
)
export default App;

看看做了啥：

首先第一步引入useContext
然后引入 UserProvider 以及上下文 UserContext
再需要使用的組件中調(diào)用 useContext 方法獲取 state
當(dāng)然前提是要在父組件中使用 UserProvider 嵌套主 children

這樣通過(guò) useContext 和 useState 就重構(gòu)完畢了，看起來(lái)代碼又少了不少

果圖:

使用場(chǎng)景: 使用React渲染后臺(tái)返回的數(shù)據(jù), 遍歷以列表的形式展示, 可能內(nèi)容簡(jiǎn)要字段需要鼠標(biāo)放上去才顯示的
可以借助DOM的自定義屬性和CSS偽類的attr來(lái)實(shí)現(xiàn)

所有代碼:

在線咨詢

上一篇：HTML開(kāi)發(fā)工具和環(huán)境介紹，內(nèi)附超詳細(xì)的VS cod
下一篇：基于Vue開(kāi)源的高效復(fù)雜表格解決方案-「vxe-ta

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商