Projektowanie interfejsu

Interfejs rozszerzenia powinien być jak najbardziej świadomy i ograniczony do minimum. Podobnie jak w przypadku rozszerzeń, Interfejs powinien dostosowywać i ulepszać przeglądanie bez rozpraszania jego uwagi.

W tym przewodniku omawiamy wymagane i opcjonalne funkcje interfejsu użytkownika. Dzięki temu dowiesz się, jak i kiedy , aby zaimplementować różne elementy interfejsu w rozszerzeniu.

Aktywuj rozszerzenie na wszystkich stronach

Użyj parametru browser_action, jeśli funkcje rozszerzenia działają w większości sytuacji.

Zarejestruj działanie przeglądarki

Pole "browser_action" jest zarejestrowane w pliku manifestu.

{
  "name": "My Awesome browser_action Extension",
  ...
  "browser_action": {
    ...
  }
  ...
}

Zadeklarowanie "browser_action" powoduje zmianę koloru ikony, co oznacza, że rozszerzenie jest dostępne dla: użytkowników.

Dodaj plakietkę

Plakietki wyświetlają kolorowy baner z maksymalnie czterema znakami nad ikoną przeglądarki. Mają dostęp tylko do być używane przez rozszerzenia, które w pliku manifestu zadeklarują "browser_action".

Używaj plakietek do wskazywania stanu rozszerzenia. W przykładzie Zdarzenie woda do spożycia wyświetlane jest: plakietka z napisem „WŁĄCZONE” aby pokazać użytkownikowi, że udało się ustawić alarm, i nie wyświetla niczego, gdy jest nieaktywne.

Ustaw tekst plakietki, wywołując parametr chrome.browserAction.setBadgeText i podając kolor banera , dzwoniąc pod numer chrome.browserAction.setBadgeBackgroundColor .

chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});

Aktywuj rozszerzenie na wybranych stronach

Użyj parametru page_action, gdy funkcje rozszerzenia są dostępne tylko w określonych okolicznościach.

Zadeklaruj działanie na stronie

Pole "page_action" jest zarejestrowane w pliku manifestu.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    ...
  }
  ...
}

Zadeklarowanie "page_action" spowoduje kolorowanie ikony tylko wtedy, gdy rozszerzenie jest dostępne dla użytkowników. W przeciwnym razie będzie wyświetlany w skali szarości.

Zdefiniuj reguły aktywowania rozszerzenia

Aby określić reguły korzystania z rozszerzenia, wywołaj chrome.declarativeContent w komponencie runtime.onInstalled w skrypcie w tle. Przykład Działania na stronie według adresu URL określa warunek, że URL musi zawierać „g”. Jeśli warunek jest spełniony, rozszerzenie połączenia: declarativeContent.ShowPageAction().

chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains a 'g' ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'g' },
          })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

Włączanie i wyłączanie rozszerzenia

Rozszerzenia korzystające z interfejsu "page_action" mogą aktywować i wyłączać je dynamicznie, wywołując pageAction.show i pageAction.hide.

Przykładowe rozszerzenie Mappy skanuje stronę internetową pod kątem adresu i pokazuje jego lokalizację na statycznym tle. mapę w wyskakującym okienku. Rozszerzenie zależy od treści strony, więc nie może zadeklarować reguł. aby przewidzieć, które strony będą trafne. Zamiast tego po znalezieniu adresu na stronie wywołuje go. pageAction.show, aby kolorować ikonę i określić, że na tej karcie można używać rozszerzenia.

chrome.runtime.onMessage.addListener(function(req, sender) {
  chrome.storage.local.set({'address': req.address})
  chrome.pageAction.show(sender.tab.id);
  chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});

Dodaj ikony rozszerzeń

Rozszerzenia wymagają do reprezentowania co najmniej 1 ikony. Dostarczaj ikony w najlepszym formacie PNG wyników wizualnych, chociaż każdy format obsługiwany przez WebKit, w tym BMP, GIF, ICO czy JPEG, zaakceptowano.

Wskaż ikony na pasku narzędzi

Ikony dla paska narzędzi są zarejestrowane w polu "default_icon" pod adresem browser_action lub page_action w pliku manifestu. Uwzględnienie wielu rozmiarów zachęcano do korzystania z przestrzeni 16 dip. Zalecane są co najmniej rozmiary 16 x 16 i 32 x 32.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    "default_icon": {
      "16": "extension_toolbar_icon16.png",
      "32": "extension_toolbar_icon32.png"
    }
  }
  ...
}

Wszystkie ikony powinny być kwadratowe – w przeciwnym razie mogą być zniekształcone. Jeśli nie zostaną udostępnione żadne ikony, Chrome doda ikonę na pasek narzędzi.

Tworzenie i rejestrowanie dodatkowych ikon

Dołącz dodatkowe ikony w poniższych rozmiarach do użytku poza paskiem narzędzi.

Zarejestruj ikony w pliku manifestu w polu "icons".

{
  "name": "My Awesome Extension",
  ...
  "icons": {
    "16": "extension_icon16.png",
    "32": "extension_icon32.png",
    "48": "extension_icon48.png",
    "128": "extension_icon128.png"
  }
  ...
}

Dodatkowe funkcje interfejsu

Wyskakujące okienko

Wyskakujące okienko to plik HTML, który jest wyświetlany w specjalnym oknie po kliknięciu przez użytkownika ikony na pasku narzędzi. Wyskakujące okienko działa bardzo podobnie do strony internetowej, może zawierać linki do arkuszy stylów i tagów skryptów, ale nie zezwala na wbudowany kod JavaScript.

W wyskakującym okienku Picie wody wyświetlają się dostępne opcje minutnika. Użytkownicy ustawili alarm przez klikając jeden z dostępnych przycisków.

<html>
  <head>
    <title>Water Popup</title>
  </head>
  <body>
      <img src='./stay_hydrated.png' id='hydrateImage'>
      <button id='sampleSecond' value='0.1'>Sample Second</button>
      <button id='15min' value='15'>15 Minutes</button>
      <button id='30min' value='30'>30 Minutes</button>
      <button id='cancelAlarm'>Cancel Alarm</button>
    <script src="popup.js"></script>
  </body>
</html>

Wyskakujące okienko można zarejestrować w pliku manifestu, w ramach czynności przeglądarki lub strony.

{
  "name": "Drink Water Event",
  ...
  "browser_action": {
    "default_popup": "popup.html"
  }
  ...
}

Wyskakujące okienka można też ustawić dynamicznie, wywołując metodę browserAction.setPopup lub pageAction.setPopup

chrome.storage.local.get('signed_in', function(data) {
  if (data.signed_in) {
    chrome.browserAction.setPopup({popup: 'popup.html'});
  } else {
    chrome.browserAction.setPopup({popup: 'popup_sign_in.html'});
  }
});

Etykietka

Użyj etykietki, aby podać użytkownikom krótkie opisy lub instrukcje po najechaniu kursorem na przeglądarkę .

Etykietki są zarejestrowane w polu "default_title" browser_action lub page_action w pliku manifestu.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

Etykietki można też ustawiać lub aktualizować, wywołując metodę browserAction.setTitle i pageAction.setTitle

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});

Ciągi tekstowe dotyczące specjalizacji są zaimplementowane za pomocą internacjonalizacji. Utwórz katalogi, aby wiadomości specyficzne dla języka autoreklamy w folderze _locales, na przykład:

• _locales/en/messages.json
• _locales/es/messages.json

Formatuj wiadomości w polach messages.json poszczególnych języków.

{
  "__MSG_tooltip__": {
      "message": "Hello!",
      "description": "Tooltip Greeting."
  }
}

{
  "__MSG_tooltip__": {
      "message": "Hola!",
      "description": "Tooltip Greeting."
  }
}

Aby umożliwić lokalizację, podaj w polu etykietki nazwę wiadomości zamiast komunikatu.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "__MSG_tooltip__"
  }
...
}

omniboks

Użytkownicy mogą wywołać funkcję rozszerzenia za pomocą omniboksu. Uwzględnij pole "omnibox" w: plik manifestu i wyznacz słowo kluczowe. Przykładowe rozszerzenie Wyszukiwanie nowej karty w omniboksie używa „nt” jako słowo kluczowe.

{
  "name": "Omnibox New Tab Search",\
  ...
  "omnibox": { "keyword" : "nt" },
  "default_icon": {
    "16": "newtab_search16.png",
    "32": "newtab_search32.png"
  }
  ...
}

Gdy użytkownik wpisze „nt” z omniboksu, aktywuje rozszerzenie. Aby zasygnalizować to użytkownikowi, zmieni kolor ikony o wymiarach 16 x 16 na szarość i zostanie umieszczona w omniboksie obok nazwy rozszerzenia.

Rozszerzenie nasłuchuje zdarzenia omnibox.onInputEntered. Po wywołaniu to rozszerzenie otwiera nową kartę zawierającą wpis użytkownika w wyszukiwarce Google.

chrome.omnibox.onInputEntered.addListener(function(text) {
  // Encode user input for special characters , / ? : @ & = + $ #
  var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
  chrome.tabs.create({ url: newURL });
});

Menu kontekstowe

Dodaj nowe opcje menu kontekstowego, przyznając w pliku manifestu uprawnienia "contextMenus".

{
  "name": "Global Google Search",
  ...
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "icons": {
    "16": "globalGoogle16.png",
    "48": "globalGoogle48.png",
    "128": "globalGoogle128.png"
  }
  ...
}

Ikona 16 x 16 jest wyświetlana obok nowej pozycji menu.

Utwórz menu kontekstowe, wywołując metodę contextMenus.create w skrypcie działającym w tle. Ten należy wykonać w zdarzeniu detektora runtime.onInstalled.

chrome.runtime.onInstalled.addListener(function() {
  for (let key of Object.keys(kLocales)) {
    chrome.contextMenus.create({
      id: key,
      title: kLocales[key],
      type: 'normal',
      contexts: ['selection'],
    });
  }
});

const kLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  'ca': 'Canada',
  'cn': 'China',
  'fr': 'France',
  'it': 'Italy',
  'co.in': 'India',
  'co.jp': 'Japan',
  'com.ms': 'Mexico',
  'ru': 'Russia',
  'co.za': 'South Africa',
  'co.uk': 'United Kingdom'
};

Przykład menu kontekstowego wyszukiwarki Google tworzy wiele opcji z listy w locales.js . Jeśli rozszerzenie zawiera więcej niż jedno menu kontekstowe, przeglądarka Google Chrome automatycznie zwija je w jedno menu nadrzędne.

Polecenia

Rozszerzenia mogą definiować określone polecenia i wiązać je z kombinacją klawiszy. Zarejestruj jeden lub więcej poleceń w pliku manifestu w polu "commands".

{
  "name": "Tab Flipper",
  ...
  "commands": {
    "flip-tabs-forward": {
      "suggested_key": {
        "default": "Ctrl+Shift+Right",
        "mac": "Command+Shift+Right"
      },
      "description": "Flip tabs forward"
    },
    "flip-tabs-backwards": {
      "suggested_key": {
        "default": "Ctrl+Shift+Left",
        "mac": "Command+Shift+Left"
      },
      "description": "Flip tabs backwards"
    }
  }
  ...
}

Polecenia mogą służyć do tworzenia nowych lub alternatywnych skrótów przeglądarki. Przykład: Tab Flipper rozszerzenie nasłuchuje zdarzenia commands.onCommand w skrypcie w tle i określa dla każdej zarejestrowanej kombinacji.

chrome.commands.onCommand.addListener(function(command) {
  chrome.tabs.query({currentWindow: true}, function(tabs) {
    // Sort tabs according to their index in the window.
    tabs.sort((a, b) => { return a.index < b.index; });
    let activeIndex = tabs.findIndex((tab) => { return tab.active; });
    let lastTab = tabs.length - 1;
    let newIndex = -1;
    if (command === 'flip-tabs-forward')
      newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
    else  // 'flip-tabs-backwards'
      newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
    chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
  });
});

Polecenia mogą też tworzyć powiązanie klucza, które działa specjalnie z jego rozszerzeniem. Przykład rozszerzenia Hello podaje polecenie otwierające wyskakujące okienko.

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "manifest_version": 2,
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

Rozszerzenie definiuje browser_action, więc może określić "execute_browser_action" w poleceń otwierających plik wyskakującego okienka bez skryptu działającego w tle. Jeśli używasz page_action, można go zastąpić elementem "execute_page_action". Przeglądarka i rozszerzenie poleceń można używać w tym samym rozszerzeniu.

Zastąp strony

Rozszerzenie może zastąpić stronę internetową Historia, Nowa karta lub Zakładki niestandardowy plik HTML. Podobnie jak wyskakujące okienko, może zawierać specjalistyczną logikę i styl, ale nie zezwala JavaScript. Jedno rozszerzenie może zastąpić tylko jedną z trzech możliwych stron.

Zarejestruj stronę zastąpienia w pliku manifestu w polu "chrome_url_overrides".

{
  "name": "Awesome Override Extension",
  ...

  "chrome_url_overrides" : {
    "newtab": "override_page.html"
  },
  ...
}

Podczas zastępowania tych pól pole "newtab" należy zastąpić kodem "bookmarks" lub "history" .

<html>
  <head>
  <title>New Tab</title>
  </head>
  <body>
    <h1>Hello World</h1>
  <script src="logic.js"></script>
  </body>
</html>