chrome.action

Opis

Dostępność

Plik manifestu

Aby używać interfejsu API chrome.action, określ "manifest_version" o wartości 3 i uwzględnij klucz "action" w pliku manifestu.

{
  "name": "Action Extension",
  ...
  "action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // optional
  },
  ...
}

Klucz "action" (razem ze swoimi elementami podrzędnymi) jest opcjonalny. Jeśli rozszerzenie nie zostanie dodane, będzie nadal widoczne na pasku narzędzi, co umożliwi dostęp do menu rozszerzenia. Dlatego zalecamy, aby zawsze uwzględniać co najmniej klucze "action" i "default_icon".

Pojęcia i wykorzystanie

Części interfejsu użytkownika

Ikona

Jest to główny obraz na pasku narzędzi rozszerzenia. Jest ona ustawiana przez klawisz "default_icon" w klucz "action" pliku manifestu. Ikony muszą mieć szerokość i wysokość 16 pikseli niezależnych od urządzenia (DIP).

Klucz "default_icon" to słownik rozmiarów i ścieżek obrazów. Chrome używa tych ikon aby wybrać skalę obrazu. Jeśli nie znajdzie dopasowania ścisłego, Chrome wybiera najbliższy i skaluje go tak, aby pasował do obrazu, co może mieć wpływ na jego jakość.

Ponieważ urządzenia z mniej powszechnymi współczynnikami skali, np. 1,5x czy 1,2x, stają się coraz bardziej popularne popularny, zachęcamy do zastosowania różnych rozmiarów ikon. To także zabezpiecza rozszerzenie przed potencjalnymi zmianami rozmiaru wyświetlanych ikon. Pamiętaj jednak: Jeśli podajesz tylko jeden rozmiar, klucz "default_icon" można również ustawić na ze ścieżką do pojedynczej ikony zamiast słownika.

Możesz też wywołać metodę action.setIcon(), by automatycznie ustawić ikonę rozszerzenia podając inną ścieżkę obrazu lub dynamicznie generowanej ikony za pomocą obszaru roboczego HTML elementu, a w przypadku ustawienia ze skryptu service worker – poza ekranem Canvas API.

const canvas = new OffscreenCanvas(16, 16);
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);
context.fillStyle = '#00FF00';  // Green
context.fillRect(0, 0, 16, 16);
const imageData = context.getImageData(0, 0, 16, 16);
chrome.action.setIcon({imageData: imageData}, () => { /* ... */ });

W przypadku rozszerzeń spakowanych (zainstalowanych z pliku .crx) obrazy mogą być w większości formatów, które Blink mechanizm renderowania, w tym PNG, JPEG, BMP, ICO i inne. Format SVG nie jest obsługiwany. Rozszerzenia bez pakietu muszą używać obrazów PNG.

Etykietka (tytuł)

Etykietka (tytuł) pojawia się, gdy użytkownik najedzie kursorem na ikonę rozszerzenia w na pasku narzędzi. Jest on też uwzględniony w tekście na potrzeby ułatwień dostępu odczytywanym przez czytniki ekranu po naciśnięciu przycisku. ostrość.

Domyślna etykietka jest ustawiana za pomocą pola "default_title" klucza "action" w manifest.json. Możesz też ustawić ją automatycznie, wywołując funkcję action.setTitle().

Plakietka

Działania mogą opcjonalnie wyświetlać „plakietkę” — fragment tekstu nałożony na ikonę. Dzięki temu możesz: zaktualizować działanie, aby wyświetlić niewielką ilość informacji o stanie rozszerzenia; takich jak licznik. Plakietka zawiera tekst i kolor tła. Ilość miejsca jest ograniczona, zalecamy, aby tekst plakietki zawierał maksymalnie 4 znaki.

Aby utworzyć plakietkę, ustaw ją automatycznie, wywołując action.setBadgeBackgroundColor() i action.setBadgeText() W pliku manifestu nie ma domyślnego ustawienia plakietki. Wartości kolorów plakietki może być tablicą złożoną z czterech liczb całkowitych z zakresu od 0 do 255, które składają się na kolor RGBA identyfikator lub ciąg z wartością kolor CSS.

chrome.action.setBadgeBackgroundColor(
  {color: [0, 255, 0, 0]},  // Green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: '#00FF00'},  // Also green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: 'green'},  // Also, also green
  () => { /* ... */ },
);

Wyskakujące okienko

Wyskakujące okienko działania wyświetla się, gdy użytkownik kliknie przycisk polecenia rozszerzenia na pasku narzędzi. Wyskakujące okienko może zawierać dowolną treść w języku HTML i zostanie automatycznie dopasowywane do rozmiaru jej treści. Rozmiar wyskakującego okienka musi wynosić od 25 x 25 do 800 x 600 pikseli.

Wyskakujące okienko jest początkowo ustawiane przez właściwość "default_popup" w kluczu "action" w parametrze manifest.json. Jeśli ta właściwość jest dostępna, powinna wskazywać ścieżkę względną w obrębie rozszerzenia. katalogu. Można ją też aktualizować dynamicznie, wskazując inną ścieżkę względną za pomocą Metoda action.setPopup().

Przypadki użycia

Stan według karty

Działania rozszerzenia mogą mieć inny stan na poszczególnych kartach. Aby ustawić wartość dla pojedynczej osoby: użyj właściwości tabId w metodach ustawień interfejsu API action. Aby na przykład: ustaw tekst plakietki dla konkretnej karty, wykonaj te czynności:

function getTabId() { /* ... */}
function getTabBadge() { /* ... */}

chrome.action.setBadgeText(
  {
    text: getTabBadge(tabId),
    tabId: getTabId(),
  },
  () => { ... }
);

Jeśli pominiesz właściwość tabId, ustawienie będzie traktowane jako ustawienie globalne. Zależne od karty ustawienia mają wyższy priorytet niż ustawienia globalne.

Stan włączenia

Domyślnie działania na pasku narzędzi są włączone (klikalne) na każdej karcie. Możesz to kontrolować za pomocą Metody action.enable() i action.disable(). Ma to wpływ tylko na to, czy wyskakujące okienko (jeśli jest dostępne) Do rozszerzenia zostało wysłane zdarzenie action.onClicked. Nie ma to wpływu na działanie działania na pasku narzędzi.

Przykłady

Poniższe przykłady pokazują kilka typowych sposobów wykorzystania działań w rozszerzeniach. Aby wypróbować ten interfejs API, zainstaluj przykładowy interfejs Action API ze strony chrome-extension-samples. z repozytorium.

Pokaż wyskakujące okienko

Rozszerzenie często wyświetla wyskakujące okienko, gdy użytkownik kliknie jego działanie. Do użyj go w swoim rozszerzeniu, zadeklaruj wyskakujące okienko w manifest.json i podaj w nim parametr które Chrome ma wyświetlić w wyskakującym okienku.

// manifest.json
{
  "name": "Action popup demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to view a popup",
    "default_popup": "popup.html"
  }
}

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      min-height: 5em;
      min-width: 10em;
      background: salmon;
    }
  </style>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Wstawianie skryptu treści po kliknięciu

Typowym wzorcem rozszerzeń jest ujawnianie ich głównej cechy za pomocą polecenia działania. Poniższy przykład ilustruje ten wzorzec. Gdy użytkownik kliknie działanie, rozszerzenie wstawia skrypt treści na bieżącej stronie. Następnie skrypt treści wyświetla alert do weryfikacji aby wszystko działało zgodnie z oczekiwaniami.

// manifest.json
{
  "name": "Action script injection demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to show an alert"
  },
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  }
}

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

// content.js
alert('Hello, world!');

Emuluj działania za pomocą metody declarativeContent

Ten przykład pokazuje, jak dzięki funkcji logicznej działania rozszerzenia w tle mogą (a) domyślnie wyłączyć działanie oraz (b) użyj metody declarativeContent, aby umożliwić wykonywanie działań w przypadku konkretnych witryn.

// service-worker.js

// Wrap in an onInstalled callback to avoid unnecessary work
// every time the service worker is run
chrome.runtime.onInstalled.addListener(() => {
  // Page actions are disabled by default and enabled on select tabs
  chrome.action.disable();

  // Clear all rules to ensure only our expected rules are set
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    // Declare a rule to enable the action on example.com pages
    let exampleRule = {
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostSuffix: '.example.com'},
        })
      ],
      actions: [new chrome.declarativeContent.ShowAction()],
    };

    // Finally, apply our new array of rules
    let rules = [exampleRule];
    chrome.declarativeContent.onPageChanged.addRules(rules);
  });
});

chrome.action.disable(
  tabId?: number,
  callback?: function,
)

chrome.action.enable(
  tabId?: number,
  callback?: function,
)

chrome.action.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.action.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.action.getBadgeTextColor(
  details: TabDetails,
  callback?: function,
)

chrome.action.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.action.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.action.getUserSettings(
  callback?: function,
)

chrome.action.isEnabled(
  tabId?: number,
  callback?: function,
)

chrome.action.openPopup(
  options?: OpenPopupOptions,
  callback?: function,
)

chrome.action.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.action.setBadgeText(
  details: object,
  callback?: function,
)

chrome.action.setBadgeTextColor(
  details: object,
  callback?: function,
)

chrome.action.setIcon(
  details: object,
  callback?: function,
)

chrome.action.setPopup(
  details: object,
  callback?: function,
)

chrome.action.setTitle(
  details: object,
  callback?: function,
)

chrome.action.onClicked.addListener(
  callback: function,
)