摘要:代碼代碼戳這里插件預(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í)自己碼代碼,太需要別人的意見了。
代碼戳這里
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)簽里引