リンクをバックグラウンドで開いたときにタブ情報を取得する方法

Chrome Extensions（拡張機能）では、Content Script・Background間で通信するときに「sendMessage」と「onMessage」をつかう。

Content ScriptからBackgroundへの通信は、特別なことをしなくてもできる。
しかし、BackgroundからContent Scriptへの通信は、ブラウザのどのタブに送信するかを示すタブIDが必要になる。


通常であれば、次のような実装ができる。

// background.js
  chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        // いろんな処理
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
            // いろんな処理
            }, callback);
    }
);

しかし、ミドルクリック（ホイールクリック）などで、リンクをバックグラウンドで開いた場合、先にあげた実装方法では対処できない。


バックグラウンドで開いているため、タブがアクティブにならずchrome.tabs.queryではタブ情報が取得できないからだ。そのため、tabs[0].idの部分で次のようなエラーが発生してしまう。

Error in response to tabs.query: TypeError: Cannot read property 'id' of undefined

※ 「バックグラウンドで開く」とは、リンクを新しいタブで開くがアクティブにならないことを指す。もう少し補足すると、リンクを開いたときに表示されるタブが現在閲覧しているタブのままで、開かれたタブに移動しないということ。

onsubmit="return false"にしているのにsubmitされてしまう

photo by Alex Proimos

Chrome Extensions（拡張機能）を開発しているときに、submitの無効化でつまづいたのでまとめておく。

submitが無効化できない

Extensions用のページで<form onsubmit=”return false;”>と書いているのに、なぜかページが更新されてしまった。

3時間くらい悩んで、コンソールに一瞬だけエラーが表示されていることに気づいた。
エラー内容は次のようなもの。

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash('sha256-....'), or a nonce ('nonce-...') is required to enabled inline execution.

インラインでJavaScript書いちゃダメだよ！というエラー。

Chrome Extensionsは、HTMLに<script type="text/javascript"></script>とか<form onsubmit=”return false;”>とは書かずに、すべて外部ファイルにまとめなければならない。

X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』

※ Google先生、この記事はアダルト系じゃないですよ！ホントです、ごめんなさい。
※ 読んでくださる皆様、X動画SはGoogle先生対策です。お手数ですが、某動画サイトだと読み替えてください。

X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』のアルファ版をリリースした。

JavaScriptでファイルを出力する（fileSystem APIの代用）

Chrome Extensionsの開発をしていて、ファイルをJSON形式で出力したくていろいろ調べていた。
Chromeにはchrome.fileSystemというAPIがあるが、Chrome Appの場合は使えるが、拡張機能（Extensions）の場合は使えない。

▶ google chrome - How to use file system in extension? - Stack Overflow


ということで、Chrome Extensionsでもできるファイルの出力方法をまとめる。

Chrome ExtensionsでUncaught EvalErrorになったときの対処法

Chrome Extensionsで、ブラウザアクションからローカルのページを表示する機能を作成していた。

そのページには、Vue.jsを使っていたのだが

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

というエラーが出て、うまく表示されなかった。

そのときの対処法をまとめる。

chrome.runtime.sendMessageでcontent_scriptsとbackground間で通信する方法

photo by gfpeck

Chrome Extensionsをつくっていたところ、same-origin policy（同一生成元ポリシー）に阻まれてしまった。
具体的にいうと、content_scriptsでとあるサイトの情報をIndexedDBに登録して、他のページでその情報を表示するということがしたかった。

いろいろググってみたところ、chrome.runtime.sendMessage, onMessageというものを使えば実現できるかもしれないと気づいた。
※ Chrome Extensions以外ならpostMessageやJSONPがヒントになるかも


前置きが長くなってしまったが、chrome.runtime.sendMessage、chrome.runtime.onMessageを使ってcontent_scripts - background間で通信する方法をまとめる。