Firefox 확장 단계별 구축

최근에 나는 줄곧 사용하고 있는 독서 목록.이것은 아주 좋은 도구이지만, 나는 문장을 뒤에 저장하는 데 익숙하다. Pocket
본 논문에서, 우리는 읽기 목록과 Pocket 계정에 자동으로 댓글을 추가할 수 있도록 Firefox 확장자를 만들 것입니다.
다음은 그 모양입니다. (확장자 파일은 본문 말미에 제공됩니다.)

확장은 브라우저에 연결된 Pocket 계정을 원합니다(따라서 API 인증을 처리할 필요가 없습니다).

브라우저 확장이란 무엇입니까?

브라우저 확장은 Firefox가 특정 페이지를 탐색할 때 실행하는 스크립트 집합입니다.이러한 스크립트는 페이지의 HTML, CSS, JavaScript를 변경하고 특정한 JavaScript APIs (책갈피, 표지 등) 에 접근할 수 있습니다.
스크립트는 content와 background 두 종류가 있다.콘텐츠 스크립트는 페이지 내에서 실행되고 백엔드 스크립트는 장기적으로 실행되며 장기적인 상태를 유지합니다.백그라운드 스크립트는 모든 WebExtension API에 액세스할 수도 있습니다.
다음은 프로젝트의 최종 파일 구조입니다.

선적 명세서.json (프로필)

배경.js (우리의 배경 스크립트)

데프토 포커트.js (dev.to 페이지에서 실행되는 내용 스크립트)

이미지/

컨텐트 및 배경 스크립트

우리 프로젝트에는 두 개의 스크립트가 있습니다. 하나는 백엔드 작업 (Ajax 요청 발송) 이고, 다른 하나는 (내용 스크립트) 이며, '읽기 목록' Dev.to 단추에 클릭 이벤트를 등록합니다.

내용 스크립트

내용 스크립트 (devtopocket.js) 를 등록해서 백엔드 스크립트에 요청을 보냅니다.
데프토 포커트.js

document.getElementById("reaction-butt-readinglist").addEventListener("click", function() {
    if(window.confirm("Do you want to save this article in Pocket?")) {
        sendBackgroundToPocket();
    }
});

sendBackgroundToPocket 방법은 백엔드 스크립트와 통신하고 Ajax 요청을 보내야 합니다.browser.runtime 확장 스크립트 간의 양방향 통신 채널을 제공합니다.browser.runtime.sendMessage 이 채널에서 메시지를 보내고 다른 쪽의 응답을 기다리는 약속을 되돌려줍니다.일단 우리가 답을 얻으면 (Ajax 요청이 완료되었다는 것을 의미함) 사용자에게 메시지를 보일 것입니다. (위의 gif 참조)
데프토 포커트.js

function sendBackgroundToPocket(){
    browser.runtime.sendMessage({"url": window.location.href}).then(function(){
        document.getElementById("article-reaction-actions").insertAdjacentHTML("afterend", "<div id='devtopocket_notification' style='text-align: center;padding: 10px 0px 28px;'>This article has been saved to Pocket!</div>")
        setTimeout(function(){
            document.getElementById("devtopocket_notification").remove()
        }, 2000)
    });  
}

배경 스크립트

백그라운드 스크립트는 특정 웹 페이지에 의존하지 않고 오래 걸리는 작업을 작성하는 데 사용됩니다.
이 스크립트는 확장자와 함께 불러오고 확장을 비활성화하거나 마운트 해제할 때까지 실행됩니다.
백그라운드 스크립트(background.js)에는

Ajax 요청 보내기

사용 내역 API

를 통해 URL 변경 사항 응답

In the extension configuration (manifest.json below), we're going to say "load devtopocket.js on pages matching an url pattern" and it works when we browse straight to an article page.

The "issue" with dev.to website is that it uses HTML5 History api to browse pages (as does every single page webapp). Firefox doesn't listen for url changes if the page isn't fully reloaded and therefore doesn't execute our content script. That's why we're going to need a background script to listen for url changes via History API, and manually execute the frontend script when needed.

우리는 webNavigation API를 사용하여 URL 변경 사항을 청취한다.
배경js

browser.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    browser.tabs.executeScript(null,{file:"devtopocket.js"});
}, {
    url: [{originAndPathMatches: "^.+://dev.to/.+/.+$"}]
});

{originAndPathMatches: "^.+://dev.to/.+/.+$"} 탐지기를 특정한 목표 URL 모드로 제한한다(우리가 manifest.json에서 정의한 모드와 같다).browser.tabs.executeScript 메서드는 현재 탭에 컨텐트 스크립트를 로드합니다.
백그라운드 스크립트에는 컨텐츠 스크립트에 대한 메시지가 필요합니다(목록 읽기 버튼을 클릭할 때).
배경js

function handleMessage(message, sender, sendResponse) {
    if(message.url) {
        sendToPocket(message.url, sendResponse)
        return true;
    }
}
browser.runtime.onMessage.addListener(handleMessage)

메시지 수신 시 sendToPocket 방법을 사용합니다.
Pocket에 URL을 저장하기 위해 Pocket에서 제공하는 기존 저장 페이지(https://getpocket.com/save를 호출합니다.하나의 고전적인 Ajax 요청으로 이러한 작업을 수행할 수 있습니다.

function sendToPocket(url, sendResponse) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            sendResponse();
        }
    };
    xhr.open("GET", "https://getpocket.com/save?url="+url, true);
    xhr.send();
}

크로스 소스 요청 문제를 보실 수 있습니다. 저희는 잠시 후에 확장 권한을 사용해서 해결할 것입니다.

선적 명세서

manifest.json는 확장된 구성 파일입니다.이것은 자바스크립트 웹 프로그램이나 안드로이드 매니페스트 중 하나package.json와 같다.안드로이드 프로그램의 xml입니다.프로젝트의 버전 및 이름, 필요한 권한 및 확장된 JavaScript 소스 파일을 정의할 수 있습니다.
먼저, 애플리케이션 정의를 작성합니다.

{
    "manifest_version": 2,
    "name": "DevToPocket",
    "version": "1.0.0",

    "description": "Send your DEV.to reading list to Pocket",

    "icons": {
        "48": "icons/devtopocket-48.png"
    },
    ...
}

최소한 48x48 아이콘을 제공합니다. 사이즈가 더 많으면 Firefox는 화면 해상도에 따라 가장 좋은 아이콘 사이즈를 사용하려고 시도합니다.이 아이콘은 다음과 같습니다.
icons/devtopocket-48.파푸아뉴기니

그런 다음 권한을 정의합니다.

{
    ...
    "permissions": [
        "storage",
        "cookies",
        "webNavigation",
        "tabs",
        "*://dev.to/*/*",
        "*://getpocket.com/*"
    ]
}

the Mozilla documentation 에서 권한 목록을 찾을 수 있습니다.
사용 권한 내의 URL은 확장 사용 권한을 부여합니다.우리의 예에서 getpocket에 접근할 수 있도록 합니다.com은 dev.to에서 소스 제한 없이 tabs.executeScript dev.to에 스크립트를 주입하고 getpocket에 접근할 수 있습니다.com cookies는 Ajax 요청을 인증합니다.전체 호스트 사용 권한 목록here을 사용할 수 있습니다.
전체 manifest.json 파일:

{
    "manifest_version": 2,
    "name": "DevToPocket",
    "version": "1.0.0",

    "description": "Send your DEV.to reading list to Pocket",

    "icons": {
        "48": "icons/devtopocket-48.png"
    },

    "content_scripts": [
        {
            "matches": ["*://dev.to/*/*"],
            "js": ["devtopocket.js"]
        }
    ],
    "background": {
        "scripts": ["background.js"]
    },

    "permissions": [
        "storage",
        "cookies",
        "webNavigation",
        "tabs",
        "*://dev.to/*/*",
        "*://getpocket.com/*"
    ]
}

내선 운행.

확장을 실행하려면 WebExt 명령줄을 사용합니다. https://github.com/mozilla/web-ext

This is a command line tool to help build, run, and test WebExtensions.

npm install --global web-ext

그런 다음 터미널에서 프로젝트 폴더에서 다음 명령을 실행합니다.

web-ext run

확장자를 잠시 불러올 브라우저를 시작합니다.일부 변경 사항이 있으면 확장이 자동으로 다시 로드됩니다.

내선 번호에 서명하다

다른 사람의 브라우저에 확장자를 설치하려면 확장자를 포장하고 서명해야 합니다.
먼저 Mozilla Developer Hub에 개발자 계정을 만들고 API 자격 증명을 검색합니다https://addons.mozilla.org/en-US/developers/addon/api/key/.
웹 ext sign 명령을 실행하려면:

web-ext sign --api-key=user:XXX --api-secret=YYY

확장 파일은 웹 ext artifacts/devtopocket-X.X-an+fx에서 사용할 수 있습니다.xpi.설치할 파일을 Firefox에서 엽니다.
전체 소스 코드는 GitHub에서 사용 가능: https://github.com/scleriot/devtopocket
최신 버전: https://github.com/scleriot/devtopocket/releases/latest 다운로드 및 설치 가능
이 확장은 안드로이드 버전 Firefox에도 적용됩니다!