入門看看？Chrome插件初窺與實踐

時間  2020-03-01
標籤 入門 看看 chrome 插件 實踐 欄目 Chrome 简体版
原文   原文鏈接

Chrome插件初窺與實踐

某頁面獲取信息時，須要驗證token判斷登錄信息。由於某些緣由，在測試過程當中，測試人員須要採用手動注入token的方式完成登錄，嚴重影響工做效率。javascript

爲了不影響原始項目，因此採用chrome插件的方式，製做一個簡單的登錄頁面模擬實際登錄狀況，並向原頁面插入token用做登錄信息。css

本文記錄了chrome插件開發的簡單概念與插件開發過程，方便之後深刻學習chrome插件的開發。html

一、核心概念

（1）manifest.json

每個chrome插件都必須有一個JSON格式的清單文件放在根目錄。下面是一些常見的配置項，其中manifest_version、name、version爲三個必填項。vue

{
    // 必須
    "manifest_version": 2, // 清單文件的版本，必須爲2
    "name": "插件名稱",
    "version": "1.0.0",
    
    // 推薦
    "default_locale": "en",
  	"description": "插件描述",
  	"icons": {...}, // 圖標
    
    // 可選
    "background":{
        "page": "background.html" // 指定後臺頁面
        "scripts": ["js/background.js"] // 指定後臺腳本
        "persistent": false // 推薦設置後臺腳本爲非持久
    },
      
    "browser_action": {	// 工具欄圖標（或page_action）
        "default_icon": "icon.png",
        "default_title": "圖標標題",// 圖標懸停時的標題，可選
        "default_popup": "popup.html"
    },
      
    "content_scripts": // 插入網頁的腳本
    [
        {
            "matches": ["http://*/*", "https://*/*"], // 匹配頁面url，<all_urls> 表示匹配全部地址
            "js": ["content.js"], // 多個JS按順序注入
            "css": ["css/custom.css"],
            "run_at": "document_start"// 代碼注入的時間，可選值： "document_start", "document_end", "document_idle"，最後一個表示頁面空閒時，默認document_idle
        },
        {...}, // 能夠配置多個規則
    ],
    "permissions": // 權限申請
    [
        "contextMenus", // 右鍵菜單
        "tabs", // 標籤
        "notifications", // 通知
        "webRequest", // web請求
        "storage", // 插件本地存儲
    ],
    "default_locale": "zh_CN", // 默認語言
    "devtools_page": "devtools.html"// devtools頁面入口，注意只能指向一個HTML文件，不能是JS文件
}
複製代碼

（2）content_script

經過content_script，咱們能夠向指定頁面注入JS或CSS。它與插入的頁面共享dom，即腳本中使用的window對象與頁面中的window對象一致。java

content_script可使用以下幾種chrome APIsnode

  • i18n
  • storage
  • runtime（connect, getManifest, getURL, id, onConnect, onMessage, sendMessage)

（3）background

background是一個運行與瀏覽器的後臺腳本/頁面，與當前瀏覽頁面無關。在配置中，能夠經過page引入頁面，或經過scripts引入JS文件。web

經過設置persistent爲false，咱們可讓background在須要時被加載，在空閒時被卸載，從而釋放系統資源。惟一保持後臺腳本持續活動的狀況是擴展使用chrome.webRequest API來阻止或修改網絡請求。webRequest API與非持久性後臺頁面不兼容。chrome

（4）popup

popup是點擊瀏覽器工具欄上小圖標打開的窗口，焦點離開頁面即關閉，可作臨時性交互。右鍵後點擊「檢查」可開啓開發者工具進行調試。vue-cli

能夠經過browser_action與page_action進行設置。browser_action可做用於任何頁面，page_aciton可做用與部分頁面。如vue tools插件，當檢測到頁面沒有使用vue時，插件圖標顯示爲不可用。npm

二、項目實踐

（1）環境搭建

項目主要使用vue-cli與vue-cli-plugin-chrome-ext進行開發，element-ui做爲組件庫

一、安裝vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli
複製代碼

二、初始化一個項目

vue create demo
複製代碼

三、進入項目目錄，安裝vue-cli-plugin-chrome-ext插件。依次選擇插件名稱、描述、版本號、使用js或ts

vue add vue-cli-plugin-chrome-ext
複製代碼

四、清理文件，刪除src/main.js, src/components, public/favicon.ico 和 public/index.html，最終目錄結構

demo
├── README.md
├── babel.config.js
├── package.json
├── node_modules
│   ├── ...
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── manifest.development.json
│   ├── manifest.production.json
│   ├── options
│   │   ├── App
│   │   │   └── App.vue
│   │   ├── index.html
│   │   └── index.js
│   └── popup
│       ├── App
│       │   └── App.vue
│       ├── index.html
│       └── index.js
├── vue.config.js
└── yarn.lock
複製代碼

（2）運行項目

運行npm run build-watch，在根目錄生成dist文件夾，在chrome擴展頁面chrome://extensions/，勾選開發者模式，選擇「加載已解壓的擴展程序」，選擇dist文件夾，就能夠添加擴展程序。添加好的插件以下圖所示：

在地址欄右側，也能夠看到添加的插件：

嘗試修改src/popup/App/App.vue文件

<template>
  <div class="main_app">
    <h1>Hello World!</h1>
  </div>
</template>
複製代碼

能夠發現dist文件被從新編譯，文本自動更新（注：若是修改了manifest.json，須要刪除插件並從新安裝）

（3）開始開發

安裝element-ui

npm i element-ui -S
複製代碼

爲了減少文件體積，按照element-ui官網所示，採起按需引用的方式

npm install babel-plugin-component -D
複製代碼
// babel.config.js

module.exports = {
  // ...
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}


複製代碼

爲popup頁面引入須要使用的組件

// src/popup/index.js

// ...
import {Input,Button,Row} from "element-ui";
Vue.use(Input)
Vue.use(Button)
Vue.use(Row)
// ...

複製代碼

使用組件完成頁面的繪製

// src/popup/App/App.vue
<template>
  <div class="main">
    <el-row>
      <el-input v-model="form.mobile" type="number" placeholder="手機號"/>
    </el-row>
    <el-row>
      <el-input v-model="form.vericode" type="text" placeholder="驗證碼">
        <el-button slot="append" @click="sendVerifyCode">{{verifyText}}</el-button>
      </el-input>
    </el-row>
    <el-row>
      <el-button @click="login" type="primary">登錄</el-button>
    </el-row>
  </div>
</template>
<script>
  export default {
    name:'app',
    data() {
      return {
        form: {
          mobile: '',
          vericode: '',
        },
        token:'',
        verifyText:'獲取驗證碼',
      }
    },
    methods: {
      login() {}, // 登錄方法請按需實現
      sendVerifyCode () {}, // 獲取驗證碼方法請按需實現
    }
  }
</script>

複製代碼

如圖所示，此時popup頁面繪製完成

如今，咱們能夠在popup頁面輸入數據，發起請求並獲取token，可是popup頁面沒法訪問原頁面，因此咱們須要將token傳遞給content,由它將token存儲在原頁面。

首先新建src/content/index.js文件，並在manifest.development.json(生產環境在manifest.production.json)中添加content的配置

// src/manifest.deveploment.json
"content_scripts":
    [
        {
            "matches": ["http://*/*", "https://*/*"], // 按須要修改匹配的地址
            "js": ["js/content.js"],
            "run_at": "document_start"
        }
    ],

複製代碼

修改vue.config.js，添加content打包設置

// vue.config.js
// 將content添加進chromeName便可
const chromeName = ["popup", "options", "content"];

複製代碼

至此，content的配置基本完成，下面須要實現的是popup與content之間的通訊

popup頁面能夠經過tabs.sendMessage向content傳遞數據。首先在manifest.development.json中添加使用tabs的權限

// src/manifest.deveploment.json
{
  // ...
  "permissions":
    [
        "tabs"
    ],
}

複製代碼

修改popup/App/App.vue，向content傳遞token

// src/popup/App/App.vue
// ...
		login() {
      	this.token = '這是token'
      	this.sendMsgToContent()
		},
    sendMsgToContent() { //向content發送信息，讓conent在頁面的sessionStroage中保存token
        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
          if (tabs.length !== 0) {
            chrome.tabs.sendMessage(tabs[0].id, this.token, (response) => {
              console.log(response)
            });
          }
        });
    }
  

複製代碼

在content/index.js中，接收token值並保存

// src/content/index.js
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        sessionStorage.clear()
        sessionStorage.setItem('token',request)
        sendResponse('收到請求');
    });

複製代碼

在頁面嘗試一下,寫入成功

（4）問題記錄

popup的錯誤能夠在窗口右鍵選擇‘檢查’

content能夠直接在頁面控制檯查看

chrome擴展程序裏的錯誤

  1. runtime不加入權限可使用，加入權限會報錯"Permission 'runtime' is unknown or URL pattern is malformed"
  2. "Uncheked runtime.lastError.Could not establish connetcion.Receiving end does not exist"。從新安裝插件並刷新頁面，基本就能夠了。

（5）打包使用

運行npm run build，生成dist文件夾，擴展程序頁面chrome://extensions/選擇「打包擴展程序」，可生成crx文件。安裝時，能夠將crx文件直接拖入擴展程序頁面進行安裝。（高版本chrome可能會提示「該擴展程序未列在 Chrome 網上應用店中...」，親測把crx的後綴改成zip，再安裝）

參考連接

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程