亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

chrome擴展的開發(fā)

yedf / 640人閱讀

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

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

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

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

manifest.json配置文件

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

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

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

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

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

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

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

browser_action指左鍵點擊右上角logo彈出的頁面，這個頁面在點開的時候加載出來，收回的時候被銷毀

options_page指右鍵點擊右上角logo彈出列表中的選項是否可點，與可點時左鍵點擊打開的頁面

content_scripts指可以在chrome窗口頁運行的js文件，matches用來匹配哪些url的窗口頁運行

{
    "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主要提供了三個運行環(huán)境，background后臺持續(xù)運行環(huán)境，browser_actionlogo彈出頁短暫運行環(huán)境，content_scripts用戶正在瀏覽頁面的操作環(huán)境，這個環(huán)境里可以操作頁面內(nèi)的元素，但是與頁面內(nèi)的原始js是各自獨立的，這三個環(huán)境可以通過chrome提供的runtime接口來實現(xiàn)通信，通過runtime接口還可以在不同擴展間通信

開發(fā)browser_action頁面

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

    這里需要注意的是:

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

    上文提到的，這個頁面點開創(chuàng)建頁面，收回銷毀頁面，不會保存變量信息

    Change query拓展的用處

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

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

    第一步，點開popup頁：

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

    第三步，提交：

    第四步，點擊下一頁：

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

    Change query拓展用到的API

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

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

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

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

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

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

    總結(jié)

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

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

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

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

    中文API

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

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79404.html

    相關(guān)文章

    • chrome擴展應(yīng)用開發(fā)快速科普

      摘要：擴展應(yīng)用模塊功能介紹擴展應(yīng)用由很多部分組成，其中主要模塊為為了避免由于翻譯原因?qū)е碌膯栴}，因此在下文中對相關(guān)模塊的稱呼一律采用上面的英文。附錄官方開發(fā)文檔英建議有英文閱讀能力的人閱讀此文檔。 概述 本文通過對chrome插件的各個部分進(jìn)行快速的介紹，從而讓大家了解插件各個部分的關(guān)系，并且知道如何將其進(jìn)行組裝成一個完整的chrome插件。 由于chrome官方文檔中對于如何從零開發(fā)一個c...

      MockingBird 評論0 收藏0

    • 了解Chrome擴展程序開發(fā)

      摘要：了解擴展程序開發(fā)本文大量借鑒圖靈電子書擴展及應(yīng)用開發(fā)首發(fā)版首先，我嘗試來用簡單幾句話描述一下擴展程序擴展主要用于對瀏覽器功能的增強，它強調(diào)與瀏覽器相結(jié)合。提供了接口，允許擴展對用戶的歷史進(jìn)行管理。 了解Chrome擴展程序開發(fā) 本文大量借鑒圖靈電子書-Chrome擴展及應(yīng)用開發(fā)（首發(fā)版） 首先，我嘗試來用簡單幾句話描述一下Chrome擴展程序： Chrome擴展主要用于對瀏覽器功能的增...

      lemanli 評論0 收藏0

    • chrome擴展開發(fā)之旅 第一篇

      摘要：擴展及應(yīng)用介紹與區(qū)別介紹支持開發(fā)者為其編寫各種各樣的擴展與應(yīng)用來擴充其功能。用處安裝擴展之后，就會讀取擴展中的文件。結(jié)語以上就是第一章的總結(jié)，接下來的筆記，敬請期待原書項目代碼下載擴展及其應(yīng)用開發(fā) 讀書筆記介紹 寒假想自己做一個chrome擴展，便從圖書館借了這本書。同時，為了培養(yǎng)自己的好習(xí)慣，做沉淀，便讀一章寫一篇總結(jié)，全書總共10章，將會分為10篇博文。歡迎大家多多指正，也希望大家...

      lei___ 評論0 收藏0

    • Chrome 擴展開發(fā)——編寫一個自己的瀏覽器插件

      摘要：配置文件每一個擴展都有一個格式的文件，叫。此消息發(fā)送后會觸發(fā)擴展內(nèi)每個頁面的事件。和持續(xù)長時間的保持會話需要在和擴展建立一個長時間存在的通道。內(nèi)容腳本發(fā)送消息到擴展程序建立通道，并給通道命名利用通道發(fā)送一條消息。 這次的練習(xí)是做一個Chrome的擴展，分享一下入門開發(fā)過程。因為在消息傳遞那塊糾結(jié)了特別久，所以我會重點總結(jié)消息傳遞那塊。 這次做這個插件的功能很簡單，就是點擊按鈕后可以對當(dāng)...

      SunZhaopeng 評論0 收藏0

    • Chrome 插件特性及實戰(zhàn)場景案例分析

      摘要：實現(xiàn)方案對頁面中涉及文案進(jìn)行修改，綁定多語言值。利用插件支持跨站請求的特性，向多語言平臺直接發(fā)送修改請求。異常處理利用插件可以獲取瀏覽器中特性，新開一個標(biāo)簽頁打開多語言后臺，進(jìn)行登錄，登錄成功后就可以實現(xiàn)請求的授權(quán)修改了。 一、前言提起Chrome擴展插件(Chrome Extension)，每個人的瀏覽器中或...

      番茄西紅柿 評論0 收藏2637

    • # 編寫第一個Chrome Extension

      摘要：可以加載到內(nèi)，通過操縱瀏覽器，從而完成一些定制的工作。一個最低需求的文件是必要的可選的圖標(biāo)等。如果這樣驗證都是如期望的話，就表明你的第一個擴展已經(jīng)開發(fā)成功。正式發(fā)布可以在內(nèi)發(fā)布擴展，只要點擊進(jìn)入后，按照操作指示即可。 Chrome Extension可以加載到Chrome內(nèi)，通過操縱Chrome瀏覽器，從而完成一些定制的工作。 假設(shè)你想要一個功能，它可以在你點擊上下文菜單項目時剪貼當(dāng)前...

      joyqi 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <