Chrome拡張機能 #4：ブックマーク登録機能の作成 2

Chrome拡張機能を作る

ブックマーク登録拡張機能の作成 2

クリップボードの内容をtextareaへペーストできた
今度はペーストした値の取得を行う。
これにはtextareaのonpasteイベントを使う。

document.execCommand("paste")の前に、pasteareaのonpasteイベント処理を追加、
取得できるかalertで表示してみる。

pastearea.onpaste = () => alert(pastearea.value)

しかし、上記ではtextareaの内容を表示できない。
タイマーを噛まさないと駄目なようだ。
以下のようにしたら表示された。

pastearea.onpaste = () => window.setTimeout( () => alert(pastearea.value),0)

URLの取得

次に取得した文字列の中からURLを抽出する。
抽出条件であるが、いろんなサイトを参考に以下条件とした。

/http(s?)\:\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+/ig

matchメソッドで抽出する。

let urls = pastearea.value.match(/http(s?)\:\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+/ig)

条件に合致しなければ urls は null となる。
なのでnullでなければforEachで配列をループさせれば良い。
例えばこんな感じ

if(urls !== null) {
  urls.forEach(url => alert(url))
}

タブ展開

取得したURLをタブに展開するには chrome.tabs APIを使用する。
※ https://developer.chrome.com/docs/extensions/reference/tabs/

タブを生成するのは createメソッドで パラメータ url にURLを指定する。

chrome.tabs.create({url:url})

---

Chrome拡張機能