お詫びと訂正

本連載第4回 「コピー機能の実装」のコードの一部に誤りがありました。お詫びして訂正いたします。

誤

document.getElementById("LINE").addEventListener("click", ()=>{
    windowOpen("https://social-plugins.line.me/lineit/share?url=" + encodeURIComponent(tabTitle));
}, false);

正

document.getElementById("LINE").addEventListener("click", ()=>{
    windowOpen("https://social-plugins.line.me/lineit/share?url=" + encodeURIComponent(tabUrl));
}, false);

権限を少なくする

では、本題に入ります。

前回まで書いてきたコードですが、まだ課題があります。

これは、Chrome の拡張機能の管理画面のスクリーンショットです。権限が、「閲覧履歴の読み取り」と、この拡張機能の機能に対して過大であることがわかります。

今回は、これを修正します。

やり方は簡単です。manifest.json の permissions を以下のように書き換えてください。

"permissions": ["activeTab"],

chrome://extensions を開き、更新ボタンを押します。

「詳細」ボタンをクリックして、「権限」欄を見てください。

「この拡張機能に特別な権限は必要ありません」と表示されていれば OK です。

不具合を修正する

しかし、これだけで今日の記事が終わってしまってはあっけないので、もう一つやります。

chrome://extension 画面で拡張機能を開き、Facebook でシェアしてみてください。

エラーになります。どうやら、URL に http:// か https:// が含まれていないとリクエストを拒否する仕様になっているようです。

そこで、URL にこれらが存在するか調べる機能を実装していきます。

HTML の修正

「Facebook のシェアボタン」〜「LINE で送るボタン」までを、<div id="sns">で囲んでください。

JavaScript の修正

popup.js の chrome.tabs.query の中の末尾に以下のコードを追加してください。

if(!/http\:\/\/|https\:\/\//.test(tabUrl)) {
    const element = document.getElementById("sns");
    element.style.marginTop = "1.5em";
    element.textContent = "このページでは SNS を用いたシェア機能をご利用になれません。ご了承ください。";
}

このコードに登場する test は、とある文字列の中に指定した文字列が含まれているかを、true または false で返すものです。

test の前に検索したい文字列を正規表現で指定します。正規表現について、詳しくは説明しませんが、このコードに関わっているルールを説明します。

1. 正規表現は2つの / (スラッシュ)の間に書く
2. | は「または」という意味。/りんご|みかん/ と書いた場合、「りんご」または「みかん」が含まれているか、という意味となる
3. 正規表現の中に登場する /(スラッシュ)や:(コロン)、;(セミコロン)が含まれている場合、これらの文字がプログラムのコマンドと誤認識されないよう、直前に \(バッククオート)を入れる。

上記のコードの場合、「http:// か https:// が含まれているか」という意味になる。

もし、http:// も https:// も含まれていない場合、先程 popup.html に追加した<div id="sns"> の上に余白を追加し、中のテキストを変更するようになっています。

これで、SNS でシェアした際にエラーになるのを防ぐことができます。

今日は以上です！

まとめ

• tabs の代わりに activeTab を指定することで、権限が無駄に多くなることが防げる。
• test を用いると、文字列を検索することができる。

本日もお疲れさまでした！

次回は Web ストアに出品する予定でしたが、予定を変更してもう一つ機能を実装していきます。

また、今回扱ったコードは、こちらから見られます。