[컴][웹] Firefox extension 만들기

불여우 확장 / 애드온 / firefox extension

Firefox extension

파이어폭스 add-on 을 만들어 보자.

아래 tutorial 을 참고하자.

• Your first extension - Mozilla | MDN
• 예제 소스 : webextensions-examples/borderify at master · mdn/webextensions-examples · GitHub

일단 extension 을 위해 폴더를 하나 만들자. 여기서는 ‘easypost’ 라는 이름을 사용한다. 그리고 이제 manifest.json 을 하나 만들자.

• manifest.json 의 key : https://developer.mozilla.org/en-US/Add-ons/WebExtensions/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 되는 것이다.

• matches : Match patterns - Mozilla
• js : Content scripts - Mozilla

{
  "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 : 

1. 'about:debugging' 에 가서
2. 왼쪽에서 '설정'아래 '이 Firefox' 선택
3. 오른쪽 본문에 '임시 확장 기능' 부분을 보면 '임시 부가 기능 로드' 가 있다.
4. 이 것을 누르고, 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 을 누르면 동작하기

아래 소스를 보면 알 수 있다.

• https://github.com/mdn/webextensions-examples/tree/master/apply-css

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 를 이용하게 된다.

• https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/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

1. https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples
2. 예제소스들 https://github.com/mdn/webextensions-examples
3. Example extensions - Mozilla | MDN