chrome拡張機能を作ってみた


こんにちは、Qiitaへの投稿は久しぶりになります。toyohamaです。
今回はchromeの拡張機能を作る機会があったので、かんたんにまとめてみます。

## 要件

- 表示しているページから、リンクされているURLを取得したい
- 同じドメインのリンク、つまりサイト内のリンクを取得したい
- 複数同じリンクがあればまとめてほしい
- baseタグには対応していない(しなくていい)

## 作ったもの

![スクリーンショット 2021-12-23 6.27.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102801/181e38fb-866e-bb5e-a39e-2755fc67b276.png)

### content.js

```js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  
  var aryResult = []; 
  const html = document.all[0].outerHTML;
  const aryAtag = html.match(/<a(?: .+?)?>/g);
  aryAtag.forEach(function(elem, index) {
    if ( elem.includes('href') ) {
      const sUrl = convertAbsUrl(pickUpHref(elem));
  
      if (!aryResult.includes(sUrl) ) {
        aryResult.push(sUrl);
      }
    }
  });
    
  aryResult.sort();
  sendResponse(aryResult);

});

var convertAbsUrl = function( src ){
    return $("<a>").attr("href", src).get(0).href;
}

var pickUpHref = function(text){
  var href = "";
  text = text.replace(/^.*href=('|")*/, "");
  text = text.replace(/^([^'" ]+)?( |"|').*$/, "$1");

  const url = text;
  if ( typeof(url) === 'string' ) {
    href += url;
  } else {
    href += url[0];
  } 
  return href; 
}   
  
```


### jquery.min.js

- 公式から取得してください

### manifest.json

```json
{ 
  "name": "getUrlList",
  "version": "0.0.2", 
  "manifest_version": 2,
  "content_scripts": [{
    "run_at":"document_idle",
    "matches": ["<all_urls>"],
    "js": ["jquery.min.js", "content.js"]
  }],
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
  ]
}
```

### popup.html
```html
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="min-width:500px">
<form>
<input type=button id=getsource value="ページ内URL取得"> &nbsp;
<div id="textView"></div>

</form>

<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</body>
</html>
```

### popup.js
```js
let Data = {"Title": "", "URL": ""}  // とりま格納する変数

chrome.tabs.getSelected(tab=>{  // 現在のタブを取得
    Data.Title = tab.title;  // tabに現在のタブが格納されている（？）。
    Data.URL = tab.url;    // tab.titleには現在開いているタブのページタイトルが、tab.urlにはURLが格納されている。
});

$('#getsource').on('click', function(){
  chrome.tabs.query( {active:true, currentWindow:true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {message: 'pageall'}, function(item){
      setCheckUrl(item);
    });
  });

});

var setCheckUrl = function(item){
  const baseUrl = Data.URL.match(/^https*:\/\/[^\/]+\//);
  console.log("[baseUrl]"+baseUrl);
  const snipurlnum = 80;
  var cnt = 0;
  var html = '<ul>'
  for (let elem in item) {
    const linkUrl = item[elem];

    if ( linkUrl.indexOf(baseUrl) !== 0){
      continue;
    }
    var shotenurl = linkUrl;
    if ( linkUrl.length > snipurlnum) {
      shotenurl = linkUrl.slice(0, snipurlnum)+"...";
    }
    
    html += '<li id="urlli'+cnt+'"><a id="urla'+cnt+'" href="'+linkUrl+'">'+shotenurl+'</a></li>';
    cnt++;
  }
  html += '</ul>';
  $('#textView').html(html);
}

```


## 動き

インストールのあたりは省かせていただいて……

### 拡張機能を起動

![スクリーンショット 2021-12-23 6.37.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102801/a9eaabe2-bb61-dc51-6e8c-31b962b720d4.png)

### ポップアップ内のボタンをクリック

![スクリーンショット 2021-12-23 6.36.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102801/accab819-5a1c-d211-4a52-f09a41d8c63a.png)


## ドハマリするところ

### 拡張機能をリロードしていない

![スクリーンショット 2021-12-23 5.33.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102801/4048a36b-15ec-129f-fb01-7cb56e6393c8.png)

拡張機能のページから、必ず右下のリロードボタンをクリック。

### 拡張機能を動かすページをリロードしていない

忘れがちなのが、リロードした拡張機能を動かすページのほうをリロードする、というところ。
必ずやりましょう。師走に無駄な時間を使わないように、と自分へsendMessage。寒い。


## まとめ

ちょろっとでも何かを作るのって楽しいですね。



## 参考文献

タブのオブジェクトを取得する部分、使わせていただきました。
https://qiita.com/a01sa01to/items/bd7b18b4ec3dc6c46b32



他にも参考にしたものあったんですが、元サイトがどこかわからなくなってしまったのもあり……この場を借りてお礼申し上げます。