Chrome拡張機能開発　chrome.browserAction アクションボタンのサンプル

概要

chrome機能拡張　chrome.browserAction アクションボタンのサンプル

ボタンを押すと　console.log('Pushed!');//For debugging　が1回実行されるだけのファイル。

f:id:karupoimou:20190422032627p:plain — サンプル

サンプルファイルのダウンロード

github.com

ファイル構成

f:id:karupoimou:20190422032214p:plain

コード

manifest.json

{
    "manifest_version": 2,
    "name": "action_button_sample",
    "description": "action_button_sample",
    "version": "1.0",
    "author":"My Name",

    "permissions": ["tabs"],
    "browser_action": {
        "default_icon": "icons/icon48.png",
        "default_title": "action_button_sample",
        "default_popup": "popup.html"
    },
    "icons": {
    "48": "icons/icon48.png"
    }
}

popup.html

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

style.css

input{
    font-size: 18px;
    color: #555;
    padding: 0px;
    height: 40px;
    grid-area: result;
    width: 95%;
}

popup.js

window.onload = function ()
{
  //Run when opened
}

//Aboutボタン（常に有効）
$(function(){
　$("#btn").click(function(){

  //Executed when the button is pressed

  console.log('Pushed!');//For debugging

　});
});

//debugging url (change "mocolllbmbndodjhaiochlcgpdoabdom" to your chrome Extension ID
//chrome-extension://mocolllbmbndodjhaiochlcgpdoabdom/popup.html