소개

여러 번 Qiita 기사를 쓰고 참고 사이트의 URL을 작성하는 것이 번거로워 졌기 때문에보고있는 페이지에서 Qiita에 붙여 넣을 텍스트를 준비 할 수 있습니다. 복사하는 곳까지 가고 싶은 곳입니다만, 이번은 취득까지입니다.

document.title

JavaScript에서 페이지의 제목을 얻으려면 document.title에서 좋다는 것을 즉시 알았지 만 background.js에서 아무 것도 얻을 수 없습니다. 페이지에서 작동하는 content_scripts에서 가져 왔습니다. 여기에서 background.js에 데이터를 전달하는 방법을 생각해보십시오.

content_scripts에서 background.js로 데이터 게시

runtime.Port 와 runtime.connect 라고 하는 것으로 교환을 할 수 있는 것을 알았으므로, 오른쪽 클릭 메뉴 선택시에, background.js 로부터 content_scripts 에 메세지를 보내면(자), 페이지의 타이틀을 URL을 background.js 에 되돌린다고 하는 구조로 취득한다 같이 해 보았습니다.

content_scripts

console.log("sample.js is loaded");
var myPort = browser.runtime.connect({name:"port-from-sample"});
var urlForQiita = "[" + document.title + "](" + document.URL + ")"
myPort.onMessage.addListener(function(m) {
    myPort.postMessage({title: urlForQiita});
});

background.js

browser.contextMenus.create({
    id: "copyUrlForQiita",
    title: "copy url for qiita",
    contexts: ["all"]
});

var portFromSample
var urlForQiita
function connected(p) {
    portFromSample = p;
    portFromSample.onMessage.addListener(function(m) {
        urlForQiita = m.title;
        console.log(urlForQiita);
    });
}
browser.runtime.onConnect.addListener(connected);

browser.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "copyUrlForQiita") {
        portFromSample.postMessage({action: "copyUrlForQiita"});
    } 
});

좀 더 쉽게 할 수 있을까 생각했습니다만, 이외라고 생각하지 않으면 안 되네요. 페이지의 로드 직후라면 문제 없습니다만, 다른 탭으로 페이지를 로드하면 그쪽의 데이터 밖에 잡히지 않게 되어 버리고 있으므로, 그 대응도 필요할 것 같습니다. 탭 전환했을 때의 대응은 또 이번 조사해 보겠습니다.

참고

runtime.Port - Mozilla | MDN