여기서는 임의로 extension 이라는 folder 에서 작업을 하도록 하겠다.
- manifest.json 을 만든다.
- icon.png 를 copy 해 놓는다.
- chrom 을 개발자 모드로 설정
- 압축해제된 확장 프로그램 로드 선택
- manifest.json 과 icon.png 가 있는 folder 를 선택한다.
- popup.html, popup.js 를 copy 해 놓는다.
- 확장프로그램 메뉴에 가서 새로고침을 한다.
tutorial : https://developer.chrome.com/extensions/getstarted.html
Resources
Tutorial : Debugging
samples
Tabs 관련
Examples
browser icon 누를 때 action 처리
plugin icon 을 누를 때 처리는 아래와 같다. 주의할 점은 browser_action 에 default_action 이 없어야 한다.chrome.browserAction.onClicked.addListener(goToRap);
// browser_action 에 "default_action" 이 있으면 안된다.
"browser_action": {
"default_icon": "icon.png"
}
background.js 에서 jQuery 를 사용
"background": {
"persistent": false,
"scripts": ["jquery.js"],
"page": "background.html"
},
page 와 scripts 항목은 동시에 사용이 안된다. 그래서 아래와 같이 수정 해 줬다.
"background": {
"persistent": false,
"scripts": ["jquery.js", "background.js"],
},
위와 같이 사용하면, chrome 에서 알아서 아래와 같은 background.html 을 만든다.
<html> <head></head> <body style=""> <script src="jquery.js"></script> <script src="background.js"></script> </body></html>
persistent:false
새로 load 된 tab 에서 jqeury 사용하기
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
if (changeInfo.status === 'complete') {
chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
chrome.tabs.executeScript(tabId, {code: "var scriptOptions = {param1:'value1',param2:'value2'};"}, function(){
chrome.tabs.executeScript(tabId, {file: "script.js"}, function(){
//all injected
});
});
});
}
});
script.js 에 새로 load 하는 tab 에 대한 작업을 적어놓으면 된다.
// all injected 부분에는 background.html 과 관련된 작업이 들어가게 된다.
댓글 없음:
댓글 쓰기