Web上で面白い記事を見つけたとき、twitterで他に誰かつぶやいてないかなー、どんなことつぶやいてるかなーと気になることありませんか？
twitterの検索機能にURLをブッ込めば検索できるんですが、それも手間なんでChrome拡張（Chrome Extension）を作ってみました。
完成品
こんな感じにワンクリックでそのページのリンクが貼ってあるtweetを検索したページに遷移する。
ソースコードはGitHubにあります。
作るよ
Chrome extensionの基本の作り方はいろいろな方の記事を参考にさせていただきました。
- Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】 - Qiita
- Chrome拡張の作り方 (超概要) - Qiita
- Chrome拡張機能の作り方｜コラム｜メンバーズ
- Google Chromeのアイコンをクリックで実行する拡張機能の作り方
- Chrome Extension の作り方 (その1: 3つの世界) - Qiita
このあたりのサンプルありの記事を参考にサンプルアプリを言われた通りに作ることからはじめました。
で、なんとなくの感覚を掴んだら実際に今回作りたかったchrome extensionの開発を開始！
manifest.jsonを書く
chrome extensionのベースの設定ファイルmanifest.jsonを作ります。
{
"name": "Search tweets about this page",
"description": "You can search tweets about this page only one click.",
"manifest_version": 2,
"version": "1.0",
"browser_action": {},
"background": {
"scripts": [ "jquery.min.js", "scripts.js" ],
"persistent": false
},
"permissions": [
"tabs"
]
}
書き方は「Chrome 拡張機能のマニフェストファイルの書き方 - Qiita」にきれいにまとめられています。
大切なところは以下。
-
background.scriptsでjquery.min.jsとscripts.jsを読み込んでる -
permissionsでtabsを指定してchrome extensionが実行されたときのタブの情報を取得できるようにしてる
jquery.min.jsをダウンロード
scripts.jsでjQueryを使うためにjquery.min.jsを公式サイトからダウンロードしておきます。
なんかまぁこんな感じでリンクがあるので「Download the compressed, production」のやつを選びましょう。
そうするとえげつない文字列のページにとばされると思うので全文コピーしてjquery.min.jsって名前で保存します。
scripts.jsを書く
で、これがほぼ実態となるscripts.jsを記述していきましょう！
まずちょっと戦略を。
今回、「今閲覧しているサイトのURLをTwitterの検索窓で検索する」、ということをしようとしています。
Twitterの検索窓の検索は、実はURLパラメーターを使ってやっているだけなんですよね（参考: Using standard search — Twitter Developers）
参考の公式サイトにも書いてある通り、例えば「twitterdev new premium」を検索したい時は、https://twitter.com/search?q=twitterdev%20new%20premiumにアクセスすればいいだけとなります。%20はスペース（" "）をURLエンコードした値なのでURLエンコードが必要なことがわかりますね。
なので、今回は今閲覧しているサイトのURLをhttps://xxxxxxxxxx.com/だとした場合、それをURLエンコードした値をhttp://twitter.com/search?q=の後に連結したURLを別タブで開かせればいいことになります。
この戦略でコーディングをすると、scripts.jsを以下のように記述することができます。
function search_tweets () {
chrome.tabs.getSelected(tab => {
target_url = "https://twitter.com/search?q=" + encodeURIComponent(tab.url)
window.open(target_url, '_blank')
})
}
$(function() {
chrome.browserAction.onClicked.addListener(search_tweets)
})
超少量の記述である。
ちょっと解説。
$(function() {
chrome.browserAction.onClicked.addListener(search_tweets)
})
最後の３行、この部分でchrome extensionのアイコンがクリックされたことをトリガーにしてsearch_tweetsファンクションを実行します。
function search_tweets () {
chrome.tabs.getSelected(tab => {
target_url = "https://twitter.com/search?q=" + encodeURIComponent(tab.url)
window.open(target_url, '_blank')
})
}
それで呼び出されるsearch_tweetsファンクションがこちらですね。
chrome.tabs.getSelected(tab => {
...
})
で現在開いているタブの情報を変数tabから取得できるようにしています。（参考: [ChromeExtension] 表示しているタブのURLを取得するサンプル | Tips of Rubbish）
target_url = "https://twitter.com/search?q=" + encodeURIComponent(tab.url)
ここでtwitter検索のURLを生成しています。
大切なのは、encodeURIComponent(tab.url)の部分。
chrome.tabs.getSelected(tab)のおかげでtab.urlで今閲覧しているページのURLを取得できるようになっています。
encodeURIComponentは文字列をURLエンコードしてくれる便利な関数です。（参考: escape と encodeURI と encodeURIComponent を正しく使い分ける）
これでtarget_urlにアクセスすれば、今閲覧しているページを検索キーワードとしてtweetを検索できるようになるので最後に、window.open(target_url, '_blank')で別タブでそのURLにアクセスさせています。（参考: jQueryを使って遷移先リンクを別タブで開く - Qiita）
クエリパラメーターにWeb解析用のパラメーターがあるとうまく挙動しない
ここまでのコードでchrome://extensions/でコードを読み込んでやればやりたいことができるようになったんです。
ただちょっと落とし穴で、今って例えばGoogle analyticsで流入元を調査するためだったりでクエリパラメーターにいろいろなコードがついているリンクって多いんですよね。
例えばhttps://xxxxxxxxxx.com?magazine_no=xxxxxxxxxxみたいな。
この場合そのページ自体はhttps://xxxxxxxxxx.comまでで十分で、tweetでもこっちでつぶやかれているのでhttps://xxxxxxxxxx.com?magazine_no=xxxxxxxxxxで検索してもヒットしないってことがあります。
なので、クエリパラメーター以降を削除するようにscripts.jsを書き換えました。
クエリパラメーターは?以降に記述するルールなのでtab.urlの文字列を?で分割して、前半部分だけをtarget_urlに連結します。
function search_tweets () {
chrome.tabs.getSelected(tab => {
base_url = tab.url.split("?")[0]
target_url = "https://twitter.com/search?q=" + encodeURIComponent(base_url)
window.open(target_url, '_blank')
})
}
$(function() {
chrome.browserAction.onClicked.addListener(search_tweets)
})
変更点は
base_url = tab.url.split("?")[0]
target_url = "https://twitter.com/search?q=" + encodeURIComponent(base_url)
この２行です。
まず、tab.url.split("?")[0]で今開いているページのURLの?より前のURLをbase_urlに代入しています。（参考: jQueryで文字列を分割したり、特定の文字以降を削除する | フロントエンド | kigiroku）
そして、encodeURIComponentの対象をtab.urlからbase_urlに変更することで無駄なクエリパラメーターを除外してtweet検索ができるようになりました！
更なる落とし穴、クエリパラメーターでページを指定してる場合もある
これで行けるかなとも思ったんですけどね...
サイトの中にはhttps://xxxxxxxxxx.com?id=xxみたいな形式でクエリパラメーターで表示するコンテンツを指定しているサイトもありました...
あれ、これはもうどっちかを救えばどっちかを救えないパターン...
と悩んだんですが、Twitterの検索機能にはOR検索があったので、もうクエリパラメーターあり版もなし版も両方検索してしまおうという結論に至りました。
TwitterのOR検索は「キーワードA OR キーワードB」って形で複数のキーワードの間にORを入れることでどちらかにヒットするtweetを検索してくれます。
ということで、最終版のscripts.jsがこちらです。
function search_tweets () {
chrome.tabs.getSelected(tab => {
base_url = tab.url.split("?")[0]
target_url = "https://twitter.com/search?q=" + encodeURIComponent(base_url) + "%20OR%20" + encodeURIComponent(tab.url)
window.open(target_url, '_blank')
})
}
$(function() {
chrome.browserAction.onClicked.addListener(search_tweets)
})
変更点はtarget_urlのところで、+ "%20OR%20" + encodeURIComponent(tab.url)を追記しています。
%20は先ほども出てきましたがスペースのURLエンコードされた文字列です。ので最終的には「クエリパラメーターを削除したURLをエンコードした文字列 OR クエリパラメーターを含んだURLをエンコードした文字列」を検索キーワードにしていることになります。
完成！！！
chrome extensionに追加する
これはGitHubのREADMEにもちょっと書きましたが、
- Chromeで chrome://extensions にアクセスする（拡張機能ページにいきます）
- デベロッパーモードをONにする（ページ右上部にあるはず）
- 「パッケージ化されていない拡張機能を読み込む」をクリックしてソースコードをおいているディレクトリを選択する
で完了です！
まとめ
初めてのchrome extensionでしたが、コード量の少なさに驚きを隠しきれませんでした。
今回はやっていることも簡単なものなのでというのはありますが、大きくつまずくこともなく行けた感じがする。
成果物については、まだid=xxxとmagazine_no=xxxxxが混在していたらどうするの？みたいな課題があったりするんですが、chrome extensionでやってみよう！が今回の目的だったりしたのでまぁいいです。笑
エゴサや他の人がどんなコメントしてるか気になるページに出会ったときに、つかってこうと思います♪
成果物 => at946/search_tweets_about_this_page_chrome_extension: You can search tweets about this page only one click.