Chrome拡張で強力なポップアップブロックを作ってみた (3)

HTTPヘッダのContent-Security-Policy (CSP)でもポップアップブロックができる事を知ったので、 その機能を使ってポップアップブロックを作ってみました。 以前作ったもの (下) とほとんど同じ機能がHTTPヘッダでも実現できるんですね。

• 強力なポップアップブロックをChrome拡張で作ってみた (1)
• 強力なポップアップブロックをChrome拡張で作ってみた (2)

最低限必要なディレクトリ構造は以下。 以前作ったものに書き加えても良いです。

usercssjs/
  manifest.json
  background.js

manifest.jsonはこんな感じにします。 permissionsとbackgroundが重要で、その他は適当です。

{
  "name": "Minimal User CSS & JavaScript",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Minimal User CSS & JavaScript",
  "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
  "background": {
    "scripts": ["background.js"]
  }
}

background.jsはこんな感じにします。CSPにある程度の権限を与えつつ、不要な項目を削除します。 使いたい機能を指定可能なオプションと照らし合わてONにすれば良いです。 ポップアップを防ぎたい場合はallow-popups関連を停止すれば十分ですが、allow-same-originも停止させてみました。

chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    var headers = details.responseHeaders;
    var csp = {
      name: "content-security-policy",
      value: "sandbox allow-scripts allow-forms allow-presentati
on allow-orientation-lock allow-pointer-lock allow-top-navigation"
    };
    headers.push(csp);
    return {responseHeaders: headers}
  }, {
    urls: ["*://www.hoge.com/*"]
  },
  ["blocking", "responseHeaders"]
);

あとはこの拡張を読み込むだけです。chrome://extensions にアクセスし、上部に表示されている「デベロッパーモード」をONにします。 そして「パッケージ化されていない拡張機能を読み込む...」を押して、usercssjsディレクトリを選択すれば完了です。 普通の拡張のようにパッケージ化していないので、Chrome拡張のファイルを編集後に設定をリロードする事ができます。結構便利。


URLを "<all_urls>" にすればすべてのサイトに適用できますが、やはり不都合が出てきます。 なので以前作ったものと使い勝手は変わらないと思う。 ただDOMを編集するよりはこちらのほうが処理が早そうだし、URLを若干だけどパターンマッチしやすくなっている利点はあるかも。