【Chrome拡張機能】ページアクション

2022年3月22日2023年3月6日

satoshiii

対象読者

Chromeの拡張機能について知りたい
ページアクションについて知りたい

何が書いてる？

ページアクションの実装方法

ページアクションとは？

「特定のページ」のみに有効なブラウザアクションの亜種

ブラウザアクションについてはこちらを参照

2022年3月21日【Chrome拡張機能】ブラウザアクション

サンプルと完成後の動作

ルールに一致しない場合、拡張機能が使えません。

URLが一致する場合、拡張機能が使えます。

コードと解説

manifestファイル

permissionsを追加します。

declarativeContent：ページのコンテンツを読み取る

background処理を追加します。

バックグラウンド処理側で、Ruleを追加します。

バックグランド処理については、こちらに記載してます。

2022年3月24日【Chrome拡張機能】バックグランドページ

{
  "manifest_version":2,
  "name":"Chrome ex page action",
  "version":"1",
  "permissions":["declarativeContent"],
  "background": {
    "scripts": ["background.js"]
  },
  "page_action":{
    "default_title":"satoshiiiブログのみ有効だよ",
    "default_popup":"popup.html"
  }
}

HTML

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8" />
<head>
    <title>ああああ</title>
</head>

<body>

<p id="hello">Hello!こんにちわ</p>

</body>
</html>

JavaScriptファイル

chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [
            new chrome.declarativeContent.PageStateMatcher({
                pageUrl: {hostEquals: 'www.satoshiiiblog.com'},
            })
        ],
        actions: [
            new chrome.declarativeContent.ShowPageAction()
        ]
    }]);
});