chrome插件編寫之新版hello world

時間 2019-12-11

標籤 chrome 插件編寫新版 hello world 欄目 Chrome 简体版

原文原文鏈接

編寫chrome插件以前，須要熟悉一下相應的chrome插件開發環境。從編寫hello world開始，參考閱讀官方的教程，是一個不錯的選擇。這裏主要是基於chrome的官方教程，稍稍作了一些修改和擴充，總結成了以下的幾個部分。javascript

在chrome中編寫插件和寫網頁應用基本一致，採用的是javascript+css+html的方式。因此對於用過chrome瀏覽器審閱過一些網頁的源碼，寫過網頁或者腳本的人而言，編寫chrome的插件感受到仍是比較熟悉的。css

1、chrome插件和用戶的幾種交互方式

比較常見的插件形式是:html

1.browser action:即在瀏覽器的右上角有一個新增的顯示插件圖標的按鈕，用戶點擊該按鈕便可以觸發插件的應用邏輯；java

2.backgroud javascript:這種狀況下插件沒有對應的圖標和按鈕，在chrome啓動時，插件運行在本身的單獨的背景線程中。與用戶的交互方式一般是在某些相關網頁加載完以後，經過javascript對該網頁進行修改，將插件邏輯嵌入到頁面html代碼中。chrome

3.page action:這種插件形式在須要時在瀏覽器地址欄中彈出一個圖標。json

更多：見Developer's Guide - Google Chromeapi

2、經過browser action實現hello world

2.1 程序的文件清單

先來看看hello world插件的文件清單，以下圖所示。其中icon.png用於圖標的顯示,manifest.json是chrome 插件的基本配置文件，popup.html用於下拉菜單的構建，popup.js是和popup.html對應的js文件。瀏覽器

2.2 manifest.json文件

{
"manifest_version":2,

"name":"one-click hello_world",
"description":"my first chrome extension-browser action",
"version":"1.0",
"permissions":[
    "https://*/*",
    "http://*/*"
    ],
"browser_action":{
    "default_icon":"icon.png",
    "default_popup":"popup.html"
    }
}

manifest.json是chrome插件的配置文件，其基本內容如上所示。"manifest_version"字段默認設置爲2。permissions字段設置了插件的基本權限，即具備訪問全部http連接的權限。browser_action字段中default_icon和default_popup分別和以前的icon.png，popup.html文件相對應。ide

2.3 popup.html

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <style>
      body {
        min-width: 100px;
        overflow-x: hidden;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
     -->
  </head>
  <body>
  <p id="p1">Hello World-1</p>
  <p id="p2">Hello World-2</p>
  <script src="popup.js"></script>
  </body>
</html>

popup.html中有兩個分別爲p1和p2的標籤，其中p1標籤中原有的內容是Hello World-1,p2標籤中原有的內容是Hello World-2。在popup.js中經過代碼將標籤1的內容修改成了Hello New World。ui

2.4 popup.js

document.getElementById("p1").innerHTML="Hello New World"

2.5 將插件安裝到chrome瀏覽器中

2.5.1進入extension頁面擴展程序

2.5.2勾選開發者模式

2.5.3將包含源碼的目錄直接拖入extension頁面，完成安裝。點擊從新加載能夠更新。

2.5.4運行，並看到了popup.html頁面的正確顯示且被popup.js所修改

3、經過backgroud javascript實現hello world！

目標：打開http://www.baidu.com/時，彈出hello world的提示框

3.1文件清單

3.2manifest.json文件

{
"manifest_version":2,

"name":"one-click hello_world",
"description":"my first chrome extension-background",
"version":"1.0",
"permissions":[
    "tabs",
    "https://*/*",
    "http://*/*"
    ],
"background": {
    "scripts": ["bg.js"],
    "persistent": false
  }
}

permission字段中，新增「tabs」屬性，後面須要經過tab來得到當前頁面的url。background字段中指明瞭須要在後臺運行的bg.js

3.3 bg.js

console.log("background")
chrome.tabs.onUpdated.addListener(function(tabId , info) {
    if (info.status == "complete") {
        chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
            var url = tabs[0].url;
            console.log(url)
            if(url=="http://www.baidu.com/"){
                chrome.tabs.executeScript(null,{code:'alert("Hello World!")'});
            }
        });
    }
});

bg.js中註冊了tabs的監聽器，在當前頁面加載完整以後檢查當前頁面連接是不是http://www.baidu.com/，並執行相應操做。

3.4 執行後的效果

4、經過page action實現hello world！

4.1 目標

訪問http://www.baidu.com，在地址欄的右側出現page action的圖標，點擊彈出html頁面

4.2文件清單

4.3manifest.json

{
"manifest_version":2,

"name":"one-click hello_world",
"description":"my first chrome extension-background",
"version":"1.0",
"permissions":[
    "tabs",
    "http://*/*"
    ],
"background": {
    "scripts": ["bg.js"],
    "persistent": false
},
"page_action": {
    "default_name": "Hello world",
    "default_icon": "marker.png",
    "default_popup": "popup.html"
    }
}

新增了page_action字段，指定了page action的圖標和下拉html。

4.4 bg.js

console.log("background")
chrome.tabs.onUpdated.addListener(function(tabId , info) {
    if (info.status == "complete") {
        chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
            var url = tabs[0].url;
            console.log(url)
            if(url=="http://www.baidu.com/"){
                chrome.pageAction.show(tabs[0].id)
            }
        });
    }
});

page action默認不作顯示，當頁面url=="http://www.baidu.com/",經過api chrome.pageAction.show顯示page action