JavaScriptでページタイトルとURLを取得（content_scriptsからbackground.js へデータをpost）

はじめに

何度かQiitaの記事を書いていて、参考サイトのURLを書くのが面倒に思えてきたので、見ているページからQiitaに貼り付ける用のテキストを準備できるようにします。コピーするところまで行きたいところですが、今回は取得までです。

document.title

JavaScriptでページのタイトルを取るには、document.title でいいのはすぐにわかったのですが、background.js からはどうも取得できない。ページで動作する content_scripts では取れてました。ここから background.js へデータを渡す方法を考えます。

content_scriptsからbackground.js へデータをpost

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