Источник: 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
Альтернативный учебник
- Создание расширения Chrome, советы и рекомендации https://medium.com/@berraknil/building-a-chrome-extension-tips-and-tricks-ba95aa664ebe
Другое