ブックマークレットをChrome拡張機能から実行する方法

ブックマークレットは便利だけれど、インストールが大変。そこで、Chrome拡張機能として作り直してみた。結果的には、2つのファイルを追加すれば実現できた。

「ボタンを押すとスクリプトを実行する」という動作にしたかったので、Page Action として作った。スクリプトを動作させたいページを開くと、アドレスバーの横にアイコンを表示する。そのアイコンをクリックすると、スクリプトを実行する。

(1) manifest.json を作る
ポイントは、permissions に、”tabs”と、スクリプトを注入するページのURLを記載する点。
URLはアスタリスク (*) を使ったパターンを記述することもできる。詳しくは Match Patterns を参照。


{
"manifest_version": 2,
"name": "Name of this extension",
"version": "0.1", // 新しい拡張を公開するたびに上げていく
"description": "Description of this extension",
"icons": {
"128": "icon128.png" // chrome://extensions に表示されるアイコン。128×128
},
"page_action": {
"default_icon": "icon128.png", // アドレスバーに表示されるアイコン。19×19, 38×38 を準備しておくべき?
"default_title": "Tooltip for the page action icon"
},
"permissions": [
"tabs",
"https://www.google.com/maps/preview" // スクリプトを実行したいURLを記載していく
],
"background": {
"scripts": ["background.js"]
}
}

view raw

manifest.json

hosted with ❤ by GitHub

(2) background.js を作る
ポイントは2つ。
1. Page Action のアイコンを表示したいURLの正規表現を記述する。正規表現と、上記 (1) のアスタリスク記法は異なるので注意。
2. 実行したいスクリプト (ブックマークレット) のファイル名、ここでは execute.js を記述する。別ファイルにせずに、直接記述することもできる (file ではなく code にする)。


var urlRegExp = new RegExp('^https?://www.google.com/maps/preview'); // アドレスバーの横にアイコンを表示するときのURL正規表現
function showIcon(tabId, changeInfo, tab) {
if (tab.url.match(urlRegExp)) {
chrome.pageAction.show(tabId);
}
}
chrome.tabs.onUpdated.addListener(showIcon);
chrome.pageAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {
"file": "execute.js" //実行したいスクリプトのファイル名 (execute.js)
}, function () {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
});
});

view raw

background.js

hosted with ❤ by GitHub

ここまで準備ができれば、Chrome単体で拡張機能を作って試すことができる。ただ、簡単にインストールできるようにするためには、Chromeウェブストアで公開する必要がある。

(3) Chromeウェブストアで公開する
まだ公開していないので、できたら報告します。
ダッシュボードにアクセスして、拡張機能を登録。ポイントは2つ。
1. 開発者登録に $5 必要。一度払えば、ずっと使えるらしい。
2. ローカルのChromeで作った.crxではなく、素の zip で固めた .zip ファイルを登録する。Chromeウェブストア側で秘密鍵を発行して署名してくれるらしい。

参考:

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中