chrome瀏覽器擴展應用開發之旅（一）

時間 2019-11-06

標籤 chrome 瀏覽器擴展應用開發之旅欄目 Chrome 简体版

原文原文鏈接

本文同時發佈於知乎專欄：前端指南
轉載需提早聯繫做者，未經容許不得轉載。javascript

在接下來的一段時間內，我會在知乎專欄內陸續分享關於chrome插件的開發以及其餘關於前端好玩有趣的東西。但願你們持續關注。
今天的主題是教你們開發一個簡單的chrome瀏覽器插件。css

什麼是chrome瀏覽器插件？html

chrome瀏覽器插件說白了就是一個用html、javascript、css組成的一個webapp；相比於一般的app，chrome插件除了普通js的功能外，還能夠調用瀏覽器層面的api，包括書籤、歷史記錄等。前端

詳細瞭解去google開發者官網：https://developer.chrome.com/...java

go！開發web

老規矩，先給你們看一下最簡單項目的目錄結構chrome

簡單介紹一下：json

html：存放html頁面api
image：存放插件圖標瀏覽器
script：存放js文件
maniifest.json：一些關於插件的元數據，做爲chrome入口文件

關於manifest更詳細的信息，能夠訪問 Manifest File Format documentation。

下面我把構成最簡單chrome插件的最簡單代碼貼上來：

demo01.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>測試</title>
</head>
<body>
  <h2>go</h2>
</body>
</html>

demo01.js

(function(){
    console.log('插件已經運行！');
})();

maniifest.json

{
  "name": "go",
  "version": "0.0.1",
  "manifest_version": 2,
  // 描述
  "description": "my first chrome plug",

  // 瀏覽器action
  "browser_action": {
    "default_icon": "image/icon.png",
    "default_popup": "html/demo01.html"
  },

  // 腳本引入
  "content_scripts": [
    {
      "js": ["script/demo01.js"],
      // 匹配規則，在什麼狀況下使用該腳本
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      // 什麼狀況下運行【文檔加載開始】
      "run_at": "document_start"
    }
  ],
  // 應用協議頁面
  "permissions": [
    "http://*/*",
    "https://*/*"
  ]
}

咱們這個插件最後的效果就是，點擊插件以後會顯示一個h2的「go」文字框，js裏面那段當即執行函數會在控制檯打印出「插件已經運行！」，最後的maniifest.json也已經寫好註釋，基本上都是見名知意。

go！安裝運行

如今基本上已經大功告成了，一個最簡單的chrome插件就已經完成了，是真的很簡單吧。

如今把咱們的第一個插件安裝一下，在chrome瀏覽器中輸入chrome://extensions，這時候會進入chrome擴展插件頁面，以下：