chrome JS 总结

1. chrome 的 console 中不能添加本地文件

2. 下面的代码是在亚马逊的商品页面上添加一个 image, 点击之后触发 alert 函数. 其中 cBoxInner 是人工寻找到的标签

/*
 * locate insertion place
 */
insertPlace = document.getElementsByClassName("cBoxInner")[2]

/*
 * create a button
 */

myImage = document.createElement("image")
myImage.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/200px-Rotating_earth_%28large%29.gif"
myImage.onclick = function() {alert("Image is clicked")}
/*
 *	insert a button
 */
 insertPlace.insertBefore(myImage)

3. using callback

JS 中有些函数是 asychronous 的, 比如

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

这种风格的代码在 C++/JAVA 中一般都是行的通的, 但在 JS 中, query 函数是 asychronous, 这意味着 query will return without its work finished

为了应对这个问题, JS 有了回调函数的说法, 回调函数的 syntax 是

chrome.tabs.query(object queryInfo, function callback)

对上一行代码, 可以写成

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

4. chrome.tabs.executeScript

syntax 为

chrome.tabs.exectuteScript (integer, InjectDetails details, function callback)

5. findElementById

返回对应的组件, 假如没有找到的话返回 NULL

6. findElementByClassName 返回的是一个数组, 可以通过数组的下标获取所需

insertPlace = document.getElementsByClassName("cBoxInner")[2]

7. chrome 获取当前 tabId

function doInCurrentTab(tabCallback) {
    chrome.tabs.query(
        { currentWindow: true, active: true },
        function (tabArray) { tabCallback(tabArray[0]); }
    );
}

var activeTabId;
doInCurrentTab( function(tab){ activeTabId = tab.id } );

8. backgroud.js 中的代码只会执行一次, 即使设置 persistent = true --- 这个实际上没啥用

要是想没打开一个网页或者刷新网页时就会触发动作, 那么就应该插入监听器, Listener