chrome拡張機能を作ってみた

Last updated at 2021-12-22Posted at 2021-12-22

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

要件

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

作ったもの

content.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

{ 
  "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>
<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

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);
}