成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Chrome擴(kuò)展插件練習(xí)——書簽管理

lingdududu / 884人閱讀

摘要:代碼代碼戳這里插件預(yù)備知識首先給出一本參考的中文書籍,在練習(xí)的過程中有幫到忙。你還可以重寫別的頁面,比如書簽管理頁面等,可以參考文檔中文翻譯過來應(yīng)該叫內(nèi)容腳本,它可以運(yùn)行在你指定的頁面之中,可以拿到指定頁面的一些信息。

前言

這是一篇關(guān)于Chrome擴(kuò)展插件入門、Vue.js入門的小練習(xí),功能是:在當(dāng)前瀏覽的頁面點(diǎn)擊擴(kuò)展圖標(biāo),并點(diǎn)擊保存之后,該頁面就會存在你的新標(biāo)簽頁中。其實(shí)就是一個可視書簽的內(nèi)容。
歡迎大家指出代碼的不足之處,很多時候都是自己學(xué)習(xí)自己碼代碼,太需要別人的意見了。

Demo代碼

代碼戳這里

Chrome插件預(yù)備知識

首先給出一本參考的中文書籍,在練習(xí)的過程中有幫到忙。當(dāng)然,最權(quán)威的還是官方文檔,只不過像我這種英文不太好星人只能揀自己看得懂的看了。另外還有官方文檔的中文版,在英文版看不懂的時候用。

manifest.json

這個文件其實(shí)就是你的擴(kuò)展插件的一個說明書。來人,上代碼!

{
  // 前三個必填
  "manifest_version": 2,
  "name": "bookmark",
  "version": "1.0",

  "description": "This extension shows bookmarks",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  
  "chrome_url_overrides": {
        "newtab": "main.html"
    },
  "content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["jquery-3.2.1.min.js", "html2canvas.js", "canvas2image.js","contentScripts.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}
   前三個必填的我不想說了,無非就是版本、名稱之類的。

browser_action

這一項(xiàng)是設(shè)置你的擴(kuò)展在瀏覽器窗口上的小圖標(biāo),以及點(diǎn)擊這個圖標(biāo)彈出的頁面的,你會發(fā)現(xiàn)文檔的寫法跟我有些不一樣,因?yàn)槲矣悬c(diǎn)懶,這樣寫字?jǐn)?shù)比較少,省事兒。同學(xué)們不要學(xué)我呦。

chrome_url_overrides

顧名思義,重寫chrome相關(guān)的頁面。我這里要重寫的是“new tab”,即新標(biāo)簽頁,頁面的內(nèi)容入口在main.html。你還可以重寫別的頁面,比如書簽管理頁面等,可以參考文檔

content_scripts

中文翻譯過來應(yīng)該叫內(nèi)容腳本,它可以運(yùn)行在你指定的頁面之中,可以拿到指定頁面的一些信息。指定的頁面就是“matches”這一項(xiàng)了。在本練習(xí)中,可以看到用正則匹配了所有頁面,因?yàn)楫吘故且鰰灺??!癹s”這一項(xiàng)是一個數(shù)組,里面放的就是你在指定頁面里用的腳本,前三個都是依賴,最后一個contentScripts.js才是真正搞事情的腳本,注意依賴是有順序的噢,其實(shí)與在標(biāo)簽里引

閱讀需要支付1元查看
<