chrome擴展的開發

時間 2019-11-07

標籤 chrome 擴展開發欄目 Chrome 简体版

原文原文鏈接

這是本人寫的第一個chrome擴展，這個擴展的廣泛適用性不強，可是確實很方便，具體的開發流程寫在這裏，感興趣的看官能夠試着本身動手寫一寫javascript

這個擴展的做用是change query，它的適用場景是更換百度搜索頁的關鍵詞，而且跳轉，若是你理解了這個意思，那你必定會想『這能有什麼用？』，是的，這在具體生活和工做中一點用處都沒有，它僅僅對筆者和筆者身邊的產品與測試有一點用處，筆者這兩個月的開發任務是一組query下的百度搜索結果頁卡片。在這裏，筆者想說本身開發chrome擴展更多的是知足本身的切身須要，因地制宜css

下面主要介紹具體開發流程html

manifest.json配置文件

第一步就是建立manifest.json配置文件：java

manifest_version、name和version爲必選，其它爲可選chrome
這個文件中manifest_version默認爲2json
name、version和description很明顯，其中version要書寫規範，且遞增api
icons是一個對象，key是像素值，value是圖片地址，chrome會選取合適像素的圖片在合適的位置（右上角仍是擴展程序頁面）當作logoapp
background指後臺執行環境，指定js文件就能夠，由於後臺基本沒有展示頁面的須要編輯器
permissions指都用到了哪些權限，本地保存的權限，操做tab頁的權限等，這些權限要在這裏聲明學習
browser_action指左鍵點擊右上角logo彈出的頁面，這個頁面在點開的時候加載出來，收回的時候被銷燬
options_page指右鍵點擊右上角logo彈出列表中的選項是否可點，與可點時左鍵點擊打開的頁面
content_scripts指能夠在chrome窗口頁運行的js文件，matches用來匹配哪些url的窗口頁運行

{
    "manifest_version": 2,
    "name": "Change query",
    "version": "1.0",
    "description": "快速切換導入列表中的query",
    "icons": {
        "48": "img/icon48.png"
    },
    "background": { "scripts": ["./js/background.js"] },
    "permissions": [
        "storage",
        "tabs"
    ],
    "browser_action": {
         "default_icon": {
            "38": "img/icon38.png"
        },
        "default_popup": "popup.html"
    },
    "options_page": "options.html",
    "content_scripts": [
        {
            "matches": [
                "http://*.baidu.com/",
                "https://*.baidu.com/"
            ],
            "js": ["js/open.js"]
        }
    ]
}

chrome主要提供了三個運行環境，background後臺持續運行環境，browser_actionlogo彈出頁短暫運行環境，content_scripts用戶正在瀏覽頁面的操做環境，這個環境裏能夠操做頁面內的元素，可是與頁面內的原始js是各自獨立的，這三個環境能夠經過chrome提供的runtime接口來實現通訊，經過runtime接口還能夠在不一樣擴展間通訊

開發browser_action頁面

筆者開發的這個chrome拓展，功能很小，只用到了browser_action頁面，本文也將只介紹browser_action頁面的開發，下面是html代碼：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <textarea class="query-area"></textarea>
    <ul class="query-list"></ul>
    <button id="btn">提交</button>
    <button id="prev">上一個</button>
    <button id="next">下一個</button>
</body>
<script type="text/javascript" src="./js/popup.js"></script>
</html>

這裏須要注意的是:

不能夠在html頁面裏面直接寫js代碼，只能引用js文件
上文提到的，這個頁面點開建立頁面，收回銷燬頁面，不會保存變量信息

Change query拓展的用處

html上面的元素很簡單，一個textarea，一個ul，三個button。本拓展的邏輯是在textarea中粘貼進query列表，點擊『提交』按鈕，接下來經過點擊『上一個』或『下一個』來切換相鄰query，跳轉到相應的結果頁面

這個拓展開發的目的很簡單，在開發完成後，要對全部的搜索query進行確認，須要在編輯器上覆制query，粘貼到輸入框回車，切換起來很繁瑣，因此開發了這個一次性複製粘貼query，而後在拓展上點擊就能夠輕鬆切換query，節省測試時間

第一步，點開popup頁：

第二步，複製query列表，粘貼進textarea：

第三步，提交：

第四步，點擊下一頁：

能夠看到飄紅的query是當前搜索的query：

Change query拓展用到的API

只用到了兩個API，chrome.storage.local與chrome.tabs，使用這兩個API須要在manifest.json文件的permissions中添加『storage』和『tabs』

chrome.storage.local用來本地存儲數據，具體使用的兩個方法：

chrome.storage.local.set({});
chrome.storage.local.get(null, function(data) {});

chrome.tabs用來操做tab頁，具體使用的方法：

// 獲取當前用戶正在瀏覽的tab頁的url
chrome.tabs.query({active: true}, function(tabs) {
    self.url = tabs[0].url;
});
// 監聽當用戶切換tab頁時，獲取切換到的tab頁的url
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    self.url = tab.url;
});
// 操做當前tab頁跳轉url
chrome.tabs.update(null, {url:nextUrl});

本項目的下載地址：點擊下載