불여우 확장 / 애드온 / firefox extension
Firefox extension
파이어폭스 add-on 을 만들어 보자.
아래 tutorial 을 참고하자.
일단 extension 을 위해 폴더를 하나 만들자. 여기서는 ‘easypost’ 라는 이름을 사용한다. 그리고 이제
manifest.json 을 하나 만들자.
보통 아래와 같은 모습을 한다. 아래 manifest.json 에 명시되어 잇는
icons/border-48.png 와
easypost.js 는 일단 아무거나 만들어 넣으면 된다. 그럼 아래와 같은 구조가 된다.
borderify/
icons/
border-48.png
borderify.js
manifest.json
여기서 중요한 것은
content_scripts 부분이다. content_scripts 부분에서는 matches 에 해당하는 url 에 가게 되면 content 부분에 script 를 적용해 준다.
matches 에 해당하는 url 에 visit 하면 ‘js’ 에 해당하는 javascript 가 inject 된다. 아래의 경우 moziila.org 로 가면 easypost.js 가 inject 되는 것이다.
{
"description": "My description",
"manifest_version": 2,
"name": "EasyPost",
"version": "0.9",
"homepage_url": "https://myeasypost.com",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["easypost.js"]
}
]
}
실행
update 2023-07-30 :
- 'about:debugging' 에 가서
- 왼쪽에서 '설정'아래 '이 Firefox' 선택
- 오른쪽 본문에 '임시 확장 기능' 부분을 보면 '임시 부가 기능 로드' 가 있다.
- 이 것을 누르고, manifest.json 을 선택하면 된다.
주소창에 about:debugging 를 치고 들어가면 우측상단에 “Load Temporary Add-on” 를 확인할 수 있다.
“Load Temporary Add-on” 를 누르고, easypost.js 를 선택해주면 extension 이 load 된다.
Debug
주소창에
about:debugging 에서 "Enable add-on debugging" 을 check 해주고, Debug 를 누르자. 그러면 Development 창이 뜬다. 이제 아무 tab 에서 원하는 page 로 들어가서 test 를 하면 된다.
Button 을 누르면 동작하기
아래 소스를 보면 알 수 있다.
manifest.json 이 아래처럼 되어 있다. page_action 은 URL bar(주소창) 에 button(또는 popup) 을 만들어 준다. 그래서 이 button 을 누른경우 background 의 js 가 실행되게 된다.
{
...
"background": {
"scripts": ["background.js"]
},
"page_action": {
"default_icon": "icons/off.svg",
"browser_style": true
},
"permissions": [
"activeTab",
"tabs"
]
}
page 내의 DOM 에서 js 실행하기
manifest.json 에서 바로 content_scripts 를 이용해서 page 를 조작할 수 있지만, 그외에는 browser.tabs.executeScript 를 이용하게 된다.
var code = 'var idInput = document.querySelector("input#identifierId");'
+ `idInput.value = '${id}';`;
var executing = browser.tabs.executeScript({
code: code
});
executing.then((result: any) => {console.log(result)},
(error: any)=>{console.log(error)});
아래처럼 file 의 js 를 불러와서 사용할 수 있다.
var executing = browser.tabs.executeScript({
file: "/content-script.js",
allFrames: true
});
See Also
- https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples
- 예제소스들 https://github.com/mdn/webextensions-examples
- Example extensions - Mozilla | MDN
