Chrome機能拡張を作ってみて分かったことメモ

Chrome機能拡張で「browser_action」を作った時のメモ(2019.04)

popup.htmlと.jsを用いたシンプルなブラウザアクションボタンを作った時の記録です。
なお1日で作ってその日のうちにリリース。翌日にFireFoxに移植という感じでスピーディーに進めることができました。

karupoimou.hatenablog.com

popup.htmlが開かられて時点で作動するjs関数

window.onload = function ()
{
  //ここの中身が実行される。
};

開いているタブのURLを取得

chrome.tabs.getSelected(null, function(tab)
{
   site_url = tab.url;
});

こうすることで、tabのURLが取得できる。
なお「tabs.getSelected」はFireFoxでは使えないので互換性に注意が必要です。
developer.mozilla.org

デバック用の表示

console.log('test!!!!');

色々な所にバック用の関数をいれておくと便利。
どこまで動いているのかいないのかが分かる。問題の切り分けにつながる。

「manifest.json」の例

{
    "manifest_version": 2,
    "name": "はじめての機能拡張",
    "description": "はじめての機能拡張！",
    "version": "1.0",
    "author":"なまえ",

    "permissions": ["tabs"],
    "browser_action": {
        "default_icon": "icons/icon19.png",
        "default_title": "はじめての機能拡張"",
        "default_popup": "popup.html"
    },
    "icons": {
    "16": "icons/icon16.png",
    "38": "icons/icon38.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
    }
}

色々なサイトで色々書いてあるけど、とりえあえず上記の内容があれば最低限動く。
パーミッションに　tabs を使っているのはタブのurlを得る権限のためです。

popup.htmlに書く jquery 　はオンラインURLを貼ってもダメ

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
      <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
      <script type="text/javascript" charset="utf-8" src="main.js"></script>
  </head>
      <body style="min-width:250px">
            <input type="button" id="my_btn" value="ボタン名" /><br>
      </body>
</html>

最初「htttp～～jquery-3.4.0.min.js」というありがちな方法を使ってみましたが、jquery が動かないというトラブルに会いました。
上記コードで使っている「jquery-3.4.0.min.js」はサイトに行って、ダウンロードし、プラグインのフォルダ内において置かなけれならない様です。
jquery がchrome機能拡張で使えないわけでは決して無く、ダウンロードしておけば普通に使えます。なおFireFoxでも使えるのでやはり便利です。

f:id:karupoimou:20190419221753p:plain — jqueryのファイルを置く場所

DLの方法とか

webkikaku.co.jp

DL出来るサイト

jquery.com

style.cssの例

body {
font-family: 'Yu Gothic UI','ヒラギノ角ゴシック','Hiragino Sans','Osaka','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

input{
    font-size: 18px;
    color: #555;
    padding: 0px;
    height: 40px;
    grid-area: result;
    width: 95%;
}
input[disabled]{
    color:#DDDDDD;
//    cursor:not-allowed; /* 禁止カーソル */
}
div { text-align : center ; }