はじめに
何度か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"});
}
});
もう少し簡単にできるかと思ったのですが、以外と考えないといけないですね。ページのロード直後だと問題ないのですが、別のタブでページをロードするとそちらのデータしか取れなくなってしまっているので、その対応も必要そうです。タブ切り替えた時の対応はまた今度調べてみます。