"Bookmarks.dev에 저장"크롬 확장 프로그램을 Firefox로 포팅

"Save to Bookmarks.dev" chrome extension in the Chrome Web Store을 처음 출판했을 때 Firefox용 버전을 개발할 시간이 없었습니다. 다른 기술을 배워야 한다고 생각했습니다. 최근에 나는 Save code snippets to Bookmarks.dev에 대한 또 다른 확장을 개발했습니다. 이번에는 시간을 투자하여 Firefox 버전도 만들기로 했습니다. Chromium 기반 브라우저와 Firefox 브라우저 모두에서 작동하도록 코드 기반을 거의 또는 전혀 변경하지 않아야 했습니다. 이 모든 것은 Mozilla 직원들이 우리를 위해 만든 webextension polyfill 덕분입니다.

따라서 이 블로그 게시물에서는 Save link to Bookmarks.dev 확장 기능을 다시 살펴보고 확장 기능이 Firefox와 호환되도록 만드는 데 필요한 변경 사항에 대해 자세히 설명하겠습니다.

Bookmarks.dev 브라우저 확장에 대한 이 저장 링크는 다음에서 사용할 수 있습니다.






Chrome
Firefox


하지만 그렇게 하기 전에 실행 중인 확장 기능을 살펴보겠습니다. 그러면 제가 말하는 내용을 알 수 있습니다.

Right click OR click the extension icon to save the active tab's link to Bookmarks.dev

폴리필 설치

이 확장은 매우 간단하기 때문에 package.json 또는 웹팩 번들을 사용하지 않으므로 polyfill 스크립트를 다운로드해야 했습니다. npm에서 릴리스된 모든 버전은 unpkg.com에서 직접 다운로드할 수 있습니다.

https://unpkg.com/webextension-polyfill/dist/
Github 릴리스에 연결됨

https://github.com/mozilla/webextension-polyfill/releases

For extensions that already include a package.json file, the last released version of this library can be quickly installed using npm install --save-dev webextension-polyfill

폴리필 설정

폴리필을 사용하려면 browser API가 액세스되는 모든 컨텍스트에 폴리필을 로드해야 합니다. 가장 일반적인 경우는 manifest.json에 지정할 수 있는 배경 및 콘텐츠 스크립트입니다(이를 사용하는 다른 스크립트 앞에 browser-polyfill.js 스크립트를 포함해야 합니다).

{
  // ...

  "background": {
    "scripts": [
      "browser-polyfill.js",
      "background.js"
    ]
  },

  "content_scripts": [{
    // ...
    "js": [
      "browser-polyfill.js",
      "content.js"
    ]
  }]
}

browserAction 팝업 또는 탭 페이지와 같은 HTML 문서의 경우 프로젝트의 README1 에서 설정 섹션을 참조하십시오.

구현 변경

구현은 확장 프로그램 아이콘을 클릭하거나 마우스 오른쪽 버튼을 클릭하고 Bookmarks.dev에 링크 저장을 선택할 때 다른 javascriptlaunch-bookmarksdev-dialog.js 실행을 트리거하는 백그라운드 스크립트를 사용합니다. 여기서는 chrome 를 browser 로 변경하기만 하면 되므로 다음과 같이 표시되지 않습니다.

browser.browserAction.onClicked.addListener(launchBookmarksDevDialog);

function launchBookmarksDevDialog() {
    browser.tabs.executeScript({
        file: 'launch-bookmarksdev-dialog.js'
    });
};

browser.contextMenus.onClicked.addListener(launchBookmarksDevDialog);

browser.runtime.onInstalled.addListener(function () {
    browser.contextMenus.create({
        "id": "save-link-to-bookmarksdev",
        "title": "Save link to Bookmarks.dev",
        "contexts": ["all"]
    });
});

chrome.browserAction... 대신

확장 테스트

Chrome 또는 Firefox에서 소스를 로드하고 다시 로드하여 확장 프로그램을 로컬에서 계속 테스트할 수 있지만 도움말web-ext2 덕분에 작업이 더 쉬워졌습니다.

프로젝트 루트 디렉토리에서 다음 명령을 실행하십시오.

web-ext run

확장 기능이 설치된 Firefox를 시작하고 소스 코드를 변경하면 다시 로드합니다. 옵션에 대해서는 web-ext 명령 참조를 참조하십시오. 3

https://extensionworkshop.com/documentation/develop/web-ext-command-reference/>

확장 빌드

web-ext 유틸리티 덕분에 릴리스를 위한 확장 패키징도 더 쉬워졌습니다.

이전에 zip 명령을 사용했다면

zip -r bookmarks.browser.extension.zip * -x *.idea* *.git* '*resources/*' '*assets/*' "*README.md*" "*CHANGELOG.md*" '*web-ext-artifacts/*'

이제 web-ext 빌드 명령을 사용합니다.

web-ext build --overwrite-dest -i 'resources' 'assets' 'README.md' 'CHANGELOG.md' 

이것은 .zip 및 기타 아티팩트와 같이 패키지에서 일반적으로 원하지 않는 파일을 무시하고 확장을 .git 파일로 패키징합니다. .zip 파일의 이름은 확장 매니페스트의 이름 필드에서 가져옵니다.
-i 옵션을 사용하여 위에 표시된 것처럼 여전히 파일을 직접 제외할 수 있습니다. 자세한 내용은 명령 참조3를 참조하십시오.
추가 옵션.

If you have found this useful, please show some love and give us a star on Github

참조

https://github.com/mozilla/webextension-polyfill#basic-setup ↩

https://github.com/mozilla/web-ext#readme ↩

https://github.com/mozilla/web-ext#readme ↩