#バドシス 〜 日々のことを続く限り書いてみようと思って 〜

頑張って日々のことを書いていこうと思います。

Chromeの拡張子作りに挑戦!

f:id:mizominton:20181121192138p:plain

 

Chromeの拡張子って実はHTML、JSの知識があれば作れるんですね。

ちょっと依頼があったので作ってみようと思います。

 

作った時のメモです。

 

概要

マニュアルは『Manifest File Format - Google Chrome』です。

 

JS処理例

拡張子アイコンクリック時の処理

// 拡張子ボタンを押下時の処理
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
alert('aaaa');
});

 

画面からのイベント取得例

HTMLにID指定し、JSで拾ってあげるイメージです。

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="sample.js"></script>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>
    <input type="button" id="click_here" value="Click here">
</body>
</html>

 

window.onload = function(){
  var btn = document.getElementById("click_here");
  // set save event
  btn.addEventListener("click", function(){
      alert("clickd!");
  });
}

トラブル

Default locale was specified, but _locales subtree is missing.

インストール時の問題。

翻訳すると『デフォルトのロケールが指定されましたが、_localesサブツリーがありません。』

となります。

Manufest.jsonのロケーション設定が原因です。

該当処理を削除すれば問題なく動作するはずです。