chrome扩展之3:一步步跟我学开发一个表单填写扩展
生活随笔
收集整理的這篇文章主要介紹了
chrome扩展之3:一步步跟我学开发一个表单填写扩展
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這節(jié)課實現(xiàn)的效果如下圖所示:
我們先想一想,怎么樣才可以在搜索框上輸入內(nèi)容呢,當然可以手動輸入^_^,除了這個之外呢? 如果您有這個頁面的后臺編輯權(quán)限就可以直接修改這個頁面的內(nèi)容。當然,這個頁面是google的, 我們沒有這個權(quán)限。雖然我們沒有后臺的權(quán)限,但我們可以獲取到前臺的權(quán)限,比如我們可以把這個文檔 保存到本地,然后編輯。不過這不是我們想要的,我們有更好的方法。這個方法是什么呢?就是注入javascript, 意思就是讓某個頁面執(zhí)行我們定義的一段javascript代碼。那么這個頁面你就可以隨心所欲地修改了。 那么下面我們就說說注入的方法,javascript的注入是由manifest.json文件定義的,只要在上節(jié)課的 manifest.json文件中添加一個"content_scripts"字段即可,詳細說明及代碼如下: 以下內(nèi)容為程序代碼:1 {
2 ????"name":"Hello Chrome",
3 ????"version":"1.0.0",
4 ????"icons":{
5 ????????"48":"icon.png"
6 ????},
7 ????"browser_action":{
8 ????????"default_title":"Hello browser action",
9 ????????"default_icon":"action.png",
10 ????????"popup":"popup.html"
11 ????},
12 ????"content_scripts":[{
13 ????????"matches":["http://www.google.com.hk/*"],
14 ????????"js":["inject.js"],
15 ????????"run_at":"document_end"
16 ????}]
17 } "matches"字段表示要注入到哪些頁面,我們這個擴展是作用于http://www.google.com.hk, 所以這個字段的值就如上代碼所示,我們還注意到上面所示的值有一個星號"*",這個符號的作用 是匹配任意以"http://www.google.com.hk/"開頭的URL。所以我們注入的代碼不緊是對 "http://www.google.com.hk" 而且也對"http://www.google.com.hk/imghp?hl=zh-CN&tab=wi&q=%E5%9C%A8google%E6%90%9C%E7%B4%A2%E6%A1%86%E4%B8%AD%E8%BE%93%E5%85%A5%E5%86%85%E5%AE%B9" 有效。 "js"字段顯而易見的,表明注入的是哪個js文件。 "run_at"字段所表示的是javascript注入的時機,這里的時機是"document_end",表示在文檔裝載完畢時進行注入。 好的,我們編輯完了manifest.json文件,現(xiàn)在讓我們添加一個名為inject.js的文件,代碼如下所示: 以下內(nèi)容為程序代碼:
1 var e=document.getElementById("lst-ib");
2 e.value="在google搜索框中輸入內(nèi)容";
這節(jié)課完成的工程下載:http://files.cnblogs.com/JiangHuakey/1.2browser_action.zip
在筆者的chrome論壇上也可以找到該文章:http://www.chinachrome.net/dispbbs.asp?boardid=2&id=13&page=1&star=1
轉(zhuǎn)載于:https://www.cnblogs.com/JiangHuakey/archive/2011/09/08/2171053.html
總結(jié)
以上是生活随笔為你收集整理的chrome扩展之3:一步步跟我学开发一个表单填写扩展的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。