chrome擴(kuò)展的開發(fā)

yedf 發(fā)布于2019-08-19 18:16 / 572人閱讀

摘要：這是本人寫的第一個(gè)擴(kuò)展，這個(gè)擴(kuò)展的普遍適用性不強(qiáng)，但是確實(shí)很方便，具體的開發(fā)流程寫在這里，感興趣的看官可以試著自己動(dòng)手寫一寫這個(gè)擴(kuò)展的作用是，它的適用場(chǎng)景是更換百度搜索頁(yè)的關(guān)鍵詞，并且跳轉(zhuǎn)，如果你理解了這個(gè)意思，那你一定會(huì)想這能有什么用，是

這是本人寫的第一個(gè)chrome擴(kuò)展，這個(gè)擴(kuò)展的普遍適用性不強(qiáng)，但是確實(shí)很方便，具體的開發(fā)流程寫在這里，感興趣的看官可以試著自己動(dòng)手寫一寫

這個(gè)擴(kuò)展的作用是change query，它的適用場(chǎng)景是更換百度搜索頁(yè)的關(guān)鍵詞，并且跳轉(zhuǎn)，如果你理解了這個(gè)意思，那你一定會(huì)想『這能有什么用？』，是的，這在具體生活和工作中一點(diǎn)用處都沒有，它僅僅對(duì)筆者和筆者身邊的產(chǎn)品與測(cè)試有一點(diǎn)用處，筆者這兩個(gè)月的開發(fā)任務(wù)是一組query下的百度搜索結(jié)果頁(yè)卡片。在這里，筆者想說(shuō)自己開發(fā)chrome擴(kuò)展更多的是滿足自己的切身需要，因地制宜

下面主要介紹具體開發(fā)流程

manifest.json配置文件

第一步就是創(chuàng)建manifest.json配置文件：

manifest_version、name和version為必選，其它為可選

這個(gè)文件中manifest_version默認(rèn)為2

name、version和description很明顯，其中version要書寫規(guī)范，且遞增

icons是一個(gè)對(duì)象，key是像素值，value是圖片地址，chrome會(huì)選取合適像素的圖片在合適的位置（右上角還是擴(kuò)展程序頁(yè)面）當(dāng)做logo

background指后臺(tái)執(zhí)行環(huán)境，指定js文件就可以，因?yàn)楹笈_(tái)基本沒有展現(xiàn)頁(yè)面的需要

permissions指都用到了哪些權(quán)限，本地保存的權(quán)限，操作tab頁(yè)的權(quán)限等，這些權(quán)限要在這里聲明

browser_action指左鍵點(diǎn)擊右上角logo彈出的頁(yè)面，這個(gè)頁(yè)面在點(diǎn)開的時(shí)候加載出來(lái)，收回的時(shí)候被銷毀

options_page指右鍵點(diǎn)擊右上角logo彈出列表中的選項(xiàng)是否可點(diǎn)，與可點(diǎn)時(shí)左鍵點(diǎn)擊打開的頁(yè)面

content_scripts指可以在chrome窗口頁(yè)運(yùn)行的js文件，matches用來(lái)匹配哪些url的窗口頁(yè)運(yùn)行

{
    "manifest_version": 2,
    "name": "Change query",
    "version": "1.0",
    "description": "快速切換導(dǎo)入列表中的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主要提供了三個(gè)運(yùn)行環(huán)境，background后臺(tái)持續(xù)運(yùn)行環(huán)境，browser_actionlogo彈出頁(yè)短暫運(yùn)行環(huán)境，content_scripts用戶正在瀏覽頁(yè)面的操作環(huán)境，這個(gè)環(huán)境里可以操作頁(yè)面內(nèi)的元素，但是與頁(yè)面內(nèi)的原始js是各自獨(dú)立的，這三個(gè)環(huán)境可以通過(guò)chrome提供的runtime接口來(lái)實(shí)現(xiàn)通信，通過(guò)runtime接口還可以在不同擴(kuò)展間通信

開發(fā)browser_action頁(yè)面

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

這里需要注意的是:

不可以在html頁(yè)面里面直接寫js代碼，只能引用js文件

上文提到的，這個(gè)頁(yè)面點(diǎn)開創(chuàng)建頁(yè)面，收回銷毀頁(yè)面，不會(huì)保存變量信息

Change query拓展的用處

html上面的元素很簡(jiǎn)單，一個(gè)textarea，一個(gè)ul，三個(gè)button。本拓展的邏輯是在textarea中粘貼進(jìn)query列表，點(diǎn)擊『提交』按鈕，接下來(lái)通過(guò)點(diǎn)擊『上一個(gè)』或『下一個(gè)』來(lái)切換相鄰query，跳轉(zhuǎn)到相應(yīng)的結(jié)果頁(yè)面

這個(gè)拓展開發(fā)的目的很簡(jiǎn)單，在開發(fā)完成后，要對(duì)所有的搜索query進(jìn)行確認(rèn)，需要在編輯器上復(fù)制query，粘貼到輸入框回車，切換起來(lái)很繁瑣，所以開發(fā)了這個(gè)一次性復(fù)制粘貼query，然后在拓展上點(diǎn)擊就可以輕松切換query，節(jié)省測(cè)試時(shí)間

第一步，點(diǎn)開popup頁(yè)：

第二步，復(fù)制query列表，粘貼進(jìn)textarea：

第三步，提交：

第四步，點(diǎn)擊下一頁(yè)：

可以看到飄紅的query是當(dāng)前搜索的query：

Change query拓展用到的API

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

chrome.storage.local用來(lái)本地存儲(chǔ)數(shù)據(jù)，具體使用的兩個(gè)方法：

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

chrome.tabs用來(lái)操作tab頁(yè)，具體使用的方法：

// 獲取當(dāng)前用戶正在瀏覽的tab頁(yè)的url
chrome.tabs.query({active: true}, function(tabs) {
    self.url = tabs[0].url;
});
// 監(jiān)聽當(dāng)用戶切換tab頁(yè)時(shí)，獲取切換到的tab頁(yè)的url
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    self.url = tab.url;
});
// 操作當(dāng)前tab頁(yè)跳轉(zhuǎn)url
chrome.tabs.update(null, {url:nextUrl});

本項(xiàng)目的下載地址：點(diǎn)擊下載

總結(jié)

chrome拓展商店里有很多優(yōu)秀的拓展可以方便我們的生活與工作
chrome拓展開發(fā)很簡(jiǎn)單，多多動(dòng)手，科技改變生活

對(duì)想學(xué)習(xí)更詳細(xì)chrome拓展的同學(xué)，推薦這里學(xué)習(xí)：

官網(wǎng)網(wǎng)站

Chrome擴(kuò)展及應(yīng)用開發(fā)

中文API

文章轉(zhuǎn)載自筆者個(gè)人博客 Gaoxuefeng"s Blog