Источник: https://developer.chrome.com/webstore/choosing

Отличия

  • Расширения Chrome — интерфейс отсутствует или его мало, сценарий с настройками, взлом и расширение различных веб-страниц, которые посещает пользователь. Обусловлен такими критериями, как конкретный(е) веб-сайт(ы) или обнаружение некоторого(ых) элемента(ов).
  • Пакетные приложения Chrome — небольшой веб-сайт с необходимым пользовательским интерфейсом, помогающим пользователю в его веб-навигации. Примечание. С июня 2022 г. пакетные приложения Chrome будут прекращены. Предпочитайте расширения или PWA.
  • Приложения, размещенные в Chrome — закладки быстрого доступа к вашему веб-сайту.

См. также альтернативу:

  • Прогрессивные веб-приложения (PWA) — с единым веб-кодом запускается как веб-сайт, который может быть установлен на устройствах пользователя, что увеличивает его возможности чтения/записи и приобретает определенную, стабильную точка доступа к значку приложения.[c]

Творчество

Все расширения и приложения Chrome:

  • определяется через manifest.json
  • веб-приложения через JS, HTML, CSS
  • каталог
/ProjectOtter/
  ├─ manifest.json     // defines applications, resources, rights
  ├─ main.html         // home page with rich UI      (optional)
  ├─ js/*              // js                          (optional)
  |  ├─main.js         // js for main.html            (optional
  |  ├─background.js   // js                          (optional)
  |  └─script.js       // js for visited pages        (optional)
  ├─ css/*             // css                         (optional)
  |  └─main.css        // css for main|options.html   (optional)
  ├─ options.html      // css & js be in main.css|js  (optional)
  └─ contentscript.js  // injects js files on visited page(optional)

Манифест.json

(Удалите раздел, не относящийся к вашему проекту.)

{
  //* DESCRIPTION ********************************************** */
  "name": "Chrome Extension > Starter",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 2,
  /* PERMISSIONS[1] ******************************************** */
  "permissions": ["activeTab", "declarativeContent", "storage",
    "clipboardWrite", "contextMenus"],
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  //* OPTIONS: user edit settings here ************************* */
  "options_page": "options.html",
  /* MAIN (apps): app's icon opens this page. ****************** */
  "page_action": {
    "default_popup": "main.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  /* WEBSITE (hosted app): home and resources' root ************ */
  "app": {
    "launch": {
      "web_url": "http://sub.mysite.com/app/home.html"
    },
    "urls": [
      "http://sub.mysite.com/app/"
    ],
  }
  /* SCRIPT (exts): runs on events **************************** */
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  /* SCRIPT (exts): runs on visited web-pages ****************** */
   "content_scripts": [{
      "matches": ["https://*.wikipedia.org/*"],
      "js": ["contentscript.js"]
  }],
  /* OTHER RESOURCES: declared, otherwise blocked ************** */
  "web_accessible_resources": ["css/*","js/*","images/*"]
}

contentscript.js

Сценарии содержимого[2], определенные в manifest.json, выполняются условно на некоторых посещаемых веб-страницах, могут читать их, вносить в них изменения и передавать информацию своему родительскому расширению.

// injects js files on visited pages
var s = document.createElement('script');
s.src = chrome.extension.getURL('js/script.js');
(document.head||document.documentElement).appendChild(s);
// After.js runs, then remove
s.onload = function() {
    s.parentNode.removeChild(s);
};

background.js

Фоновые сценарии[3], определенные в manifest.json, ожидают определенных событий для запуска действия, а затем закрываются. Он может читать им страницы, вносить в них изменения и передавать информацию своему родительскому расширению.

'use strict';
// When extension/application installed
chrome.runtime.onInstalled.addListener(function() {
  //1. Set global variable color='#3aa757', then print message
  chrome.storage.sync.set(
    {color: '#3aa757'},
    function() { console.log('The color is green.'); }
  );
  //2. Redefine scope where extension/app is activated
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // Add conditional rules to activate extension/application
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {
          schemes: ['http','https','chrome']     // active on all protocols
          // hostEquals: 'developer.chrome.com', // active on one host
        },
      })],
      // Open app's homepage (as tiny popup for minimal extensions)
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

Установить

Open chrome://extensions/ 
> Developer mode : ON
> Load unpacked : open relevant directory.
> App's "Details" : "Allows incognito" (if desired)

использованная литература

[a]: https://developer.chrome.com/webstore/apps_vs_extensions
[b]: https://developer.chrome.com/webstore/get_started_simple
[c]: https://web.dev/what-are-pwas/

[0]: https://developer.chrome.com/webstore/choosing
[1]: https://developer.chrome.com/extensions/declare_permissions
[2]: https://developer.chrome.com/extensions/content_scripts
[3]: https://developer.chrome.com/extensions/background_pages

Альтернативный учебник

Другое