chrome.actionの使い方

chrome.actionについて{
  "name": "Action API Demo",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Default Title",
    "default_popup": "popups/popup.html",
    "default_icon": {
      "32": "icons/32.png",
      "72": "icons/72.png",
      "128": "icons/128.png",
      "512": "icons/512.png"
    }
  },
  "icons": {
    "32": "icons/32.png",
    "72": "icons/72.png",
    "128": "icons/128.png",
    "512": "icons/512.png"
  }
}

 "action": {
    "default_title": "Default Title",
    "default_popup": "popups/popup.html",
    "default_icon": {
      "32": "icons/32.png",
      "72": "icons/72.png",
      "128": "icons/128.png",
      "512": "icons/512.png"
    }
  },

"default_popup": "popups/popup.html",

  "background": {
    "service_worker": "background.js"
  },

// Copyright 2021 Google LLC
//
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file or at
// https://developers.google.com/open-source/licenses/bsd

// Show the demo page once the extension is installed
chrome.runtime.onInstalled.addListener((details) => {
  chrome.tabs.create({
    url: "demo/index.html",
  });
});

chrome.runtime.onInstalled.addListener((details) => {
  chrome.tabs.create({
    url: "demo/index.html",
  });
  setInterval((details) => {
    console.log("test");
    console.log(details);
  }, 5000);
});

// The action API does not expose a way to read the action's current enabled/disabled state, so we
// have to track it ourselves.
// Relevant feature request: https://bugs.chromium.org/p/chromium/issues/detail?id=1189295
let actionEnabled = true;
let showToggleState = document.getElementById('show-toggle-state');
document.getElementById('toggle-state-button').addEventListener('click', (_event) => {
  if (actionEnabled) {
    chrome.action.disable();
  } else {
    chrome.action.enable();
  }
  actionEnabled = !actionEnabled;
});

// If a popup is specified, our on click handler won't be called. We declare it here rather than in
// the `onclicked-button` handler to prevent the user from accidentally registering multiple
// onClicked listeners.
chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({ url: 'https://html5zombo.com/' });
});

    <section id="popup">
      <h2>Popup</h2>

      <p>This demo's <a href="manifest.json">manifest.json</a> file sets the value of
      <code>action.default_popup</code> to <code>popups/popup.html</code>. We can change that behavior at runtime using <a
      href="https://developer.chrome.com/docs/extensions/reference/action/#method-setPopup"><code>action.setPopup</code></a>.</p>

      <label>
        Change popup page<br>
        <select id="popup-options">
          <option value="/popups/popup.html">Hello world (default)</option>
          <option value="/popups/a.html">A</option>
          <option value="/popups/b.html">B</option>
          <option value="">onClicked handler</option>
        </select>
      </label>

      <div class="spaced">
        <label>
          Current popup value
          <input type="text" id="current-popup-value" disabled>
        </label>
      </div>

      <p>Register a handler to change how the action button behaves. Once changed, clicking the
      action will open your new favorite website.</p>
      <button id="onclicked-button">Change action click behavior</button>
      <button id="onclicked-reset-button">reset</button>
    </section>

document.getElementById('popup-options').addEventListener('change', async (event) => {
  let popup = event.target.value;
  await chrome.action.setPopup({ popup });

  // Show the updated popup path
  await getCurrentPopup();
});

async function getCurrentPopup() {
  let popup = await chrome.action.getPopup({});
  document.getElementById('current-popup-value').value = popup;
  return popup;
};
async function showCurrentPage() {
  let popup = await getCurrentPopup();
  let pathname = '';
  if (popup) {
    pathname = new URL(popup).pathname;
  }

  let options = document.getElementById('popup-options');
  let option = options.querySelector(`option[value="${pathname}"]`);
  option.selected = true;
}

// Populate popup inputs on on page load
showCurrentPage();

// ----------
// .onClicked
// ----------

// If a popup is specified, our on click handler won't be called. We declare it here rather than in
// the `onclicked-button` handler to prevent the user from accidentally registering multiple
// onClicked listeners.
chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({ url: 'https://html5zombo.com/' });
});

document.getElementById('onclicked-button').addEventListener('click', async () => {
  // Our listener will only receive the action's click event after clear out the popup URL
  await chrome.action.setPopup({ popup: '' });
  await showCurrentPage();
});

document.getElementById('onclicked-reset-button').addEventListener('click', async () => {
  await chrome.action.setPopup({ popup: 'popups/popup.html' });
  await showCurrentPage();
});

// ----------------------
// badge background color
// ----------------------

async function showBadgeColor() {
  let color = await chrome.action.getBadgeBackgroundColor({});
  document.getElementById("current-badge-bg-color").value = JSON.stringify(
    color,
    null,
    0
  );
}

// Populate badge background color inputs on on page load
showBadgeColor();

document
  .getElementById("set-badge-background-color-button")
  .addEventListener("click", async () => {
    // To show off this method, we must first make sure the badge has text
    let currentText = await chrome.action.getBadgeText({});
    if (!currentText) {
      chrome.action.setBadgeText({ text: "hi :)" });
      showBadgeText();
    }

    // Next, generate a random RGBA color
    let color = [0, 0, 0].map(() => Math.floor(Math.random() * 255));

    // Use the default background color ~10% of the time.
    //
    // NOTE: Alpha color cannot be set due to crbug.com/1184905. At the time of writing (Chrome 89),
    // an alpha value of 0 sets the default color while a value of 1-255 will make the RGB color
    // fully opaque.
    if (Math.random() < 0.1) {
      color.push(0);
    } else {
      color.push(255);
    }

    chrome.action.setBadgeBackgroundColor({ color });
    showBadgeColor();
  });

document
  .getElementById("reset-badge-background-color-button")
  .addEventListener("click", async () => {
    chrome.action.setBadgeBackgroundColor({ color: [0, 0, 0, 0] });
    showBadgeColor();
  });

await chrome.action.setBadgeText({ text }, () => {
      console.log("BadgeText Changed");
});

document.getElementById("reset-icon-button").addEventListener("click", () => {
  let manifest = chrome.runtime.getManifest();
  chrome.action.setIcon({ path: manifest.action.default_icon });
});

document.getElementById("reset-icon-button").addEventListener("click", () => {
  let manifest = chrome.runtime.getManifest();

  // 加工しやすいようにArrayに変換
  let iconArray = Object.entries(manifest.action.default_icon);
  for (let i = 0; i < iconArray.length; i++) {
    // ルートからのパスだとエラーになるので、chrome://...となるように変換する
    iconArray[i][1] = chrome.runtime.getURL(iconArray[i][1]);
  }
  // もう一度objectに変換。chrome.action.setIconには配列はセットできないから。
  const iconObj = Object.fromEntries(iconArray);
  chrome.action.setIcon({
    path: iconObj,
  });
});

chrome.runtime.getManifest();

"permissions": ["activeTab", "scripting"],

// background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js']
  });
});