✅ Програмирайте и създавайте разширения за Chrome

Съдържание

1. Как да създадете и програмирате разширение за Chrome
2. Пример за разширения за Chrome

Този урок ще бъде разделен на 3 раздела: Първи раздел, където ще обясним различни концепции относно разширенията в Chrome, тяхната структура и основното създаване на разширение. Във втория раздел ще се съсредоточим върху създаването на разширения за този страхотен браузър като Google Chrome, като направим няколко практически примера. И накрая, в третия раздел ще обясним разширените опции при създаването на разширения и как да ги публикуваме в уеб магазина на Google Chrome, така че да са достъпни за широката общественост.

Какво представляват разширенията в Google Chrome?Разширенията са малки програми, които могат да променят и подобряват функционалността на браузъра, в този случай Chrome. Те са разработени с помощта на уеб технологии като HTML, Javascript и CSS.

Разширенията имат почти никакъв потребителски интерфейс. Например изображението по -долу показва икона на катинар, който при щракване върху него отваря малък интерфейс.

Това конкретно разширение се използва за криптиране и декриптиране на имейлите ви с PGP ключ. Разширенията са файлове, които са пакетирани в едно, което потребителят изтегля и инсталира. Тази опаковка, за разлика от нормалните уеб приложения, не е необходимо да зависи от уеб съдържание.

Както бе обсъдено по -горе, разширенията ви позволяват да добавите функционалност към Chrome, без да се впускате дълбоко в родния код. Нови разширения могат да бъдат създадени с основни технологии, с които работят повечето програмисти за уеб разработка: HTML, CSS и Javascript.

1. Как да създадете и програмирате разширение за Chrome

За начало ще направим просто разширение, което извлича изображение от Google, използвайки URL адреса на текущата страница като дума за търсене. Ще направим това, като внедрим елемент от потребителския интерфейс, който наричаме chrome.browserAction, което ни позволява да поставим икона точно до хром менюто, на което можете да щракнете за бърз достъп. Щракването върху тази икона ще отвори изскачащ прозорец, съдържащ изображение, получено от текущата страница, което ще изглежда така:

За да започнем практиката си, ще създадем директория, наречена Image_Viewer, в това ще включим всички файлове, с които ще работим. Като редактор за разработка можете да използвате този, който предпочитате, в моя случай ще използвам Chrome Dev Editor, който можете да изтеглите на следния адрес:

Chrome Dev Editor

Първото нещо, от което ще се нуждаем, е да създадем файл с манифест, наречен manifest.json. Този манифест не е нищо повече от файл с метаданни във формат JSON, който съдържа свойства като име, описание, номер на версията на неговото разширение и т.н. На напреднало ниво ще го използваме, за да декларираме пред Chrome какво ще прави разширението и разрешенията, които са необходими за извършване на определени неща.

Файловият формат на манифеста е следният:

 {// Изисква се "manifest_version": 2, "name": "My Extension", "version": "versionString", // Препоръчва се "default_locale": "es", "description": "Описание с обикновен текст", " икони ": {…}, // Изберете едно (или няма)" browser_action ": {…}," page_action ": {…}, // Незадължително" author ":…," automation ":…," background ": {// Препоръчва се „persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," команди ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convert_from_user_script ":…," съвместно присъствие ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "external_connectable": {"съвпадения": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // path / to / homepage "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," инкогнито ":" обхващащ или разделен "," input_components ":…," ключ " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "optional_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " платформи ":…," плъгини ": […]," изисквания ": {…}," пясъчник ": […]," short_name ":" Кратко име "," подпис ":…," проверка на правописа ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources ": […]}

След това ще опиша функцията, която изпълнява най -важните етикети:

При необходимост:

manifest_version: Това е манифестната версия, тя е представена от цяло число, което определя версията на файловия формат. Започвайки с Chrome 18, разработчиците трябва да посочат номер 2.

ям: Това е името, което ще има вашето разширение. Това трябва да се състои от максимум 45 знака, името е основният елемент на дефиницията на разширението и е задължително поле. Показва се на следните места:

а) В инсталационната кутия.
б) В потребителския интерфейс, където се администрира разширението.
в) Във виртуалния магазин на Chrome.

версия: Тя трябва да се състои от едно до четири цели числа, разделени с точки, които идентифицират версията на разширението. Ето някои примери за валидни версии:

"Версия 1"
"Версия": "1.0"
"Версия": "2.10.2"
"Версия": "3.1.2.4567"

Препоръчва се:

default_locale: Указва поддиректория на _locales (езици), която съдържа низовете по подразбиране за това разширение. Трябва да поставите всички низове, видими за потребителя, във файл, наречен messages.json. Всеки път, когато включите нов език, трябва да добавите нов файл messages.json под директорията _locales / localecode, където localecode е кодът на езика, точно както en е английски и е за испански език.

Пример за интернационализирано разширение с поддръжка на английски (en), испански (es) и корейски (ko) би било следното:

описание: Той съдържа низ в обикновен текст (без HTML или друг формат) с максимум 132 знака, който описва функционалността на разширението.

Икони: Позволява ви да добавите една или повече икони, които представляват разширението. Винаги трябва да се предоставя икона 128x128px. Това ще се използва по време на инсталацията и в уеб магазина на Chrome. Разширенията също трябва да предоставят икона 48x48, която се използва на страницата за управление на разширенията на Chrome (chrome: // extensions). Можете също да посочите икона 16x16, която да се използва като фавикон за страниците на разширението.

Иконите обикновено трябва да са във формат PNG, тъй като има най -добрата подкрепа за прозрачност. Те обаче могат да бъдат във всеки формат, който WebKit поддържа, включително BMP.webp, GIF.webp, ICO и JPEG.webp. Ето пример за спецификацията на иконите:

 "icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},

Пример

Изберете един (или нито един):

browser_action: Използвайте browser_action, за да поставите икони в главната лента с инструменти в горната част на браузъра Google Chrome, вдясно от адресната лента. Освен това можете да добавите подсказка (плаващо съобщение), значка (плаващ текст върху иконата) и изскачащ прозорец (плаващ прозорец).

Пример за използване browser_action:

 {"name": "Моето разширение",… "browser_action": {"default_icon": {// по избор "19": "images / icon19.png.webp", // по избор "38": "images / icon38.png.webp" // незадължително}, "default_title": "Google Mail", // по избор; показва подсказка „default_popup“: „popup.html“ // незадължително}, …}

page_action: Използвайте този API, за да поставите иконата си в адресната лента.

Пример за употреба:

 {"name": "Моето разширение",… "page_action": {"default_icon": {// по избор "19": "images / icon19.png.webp", // по избор "38": "images / icon38. png" // незадължително}, "default_title": "Google поща", // по избор; покажи в описанието "default_popup": "popup.html" // незадължително},…}

Пр

По избор:

Заден план: Обща необходимост в разширенията е да имат една страница за изпълнение на дълги последователности за управление на някаква задача или състояние. Това е HTML страница, която работи заедно с разширението. Той стартира, когато разширението започне да работи и активира само един екземпляр от него наведнъж. Вместо да използвате фон, се препоръчва да използвате страница със събитие.

В типично разширение със страница във фонов режим потребителският интерфейс, например browser_action или page_action и някои опции на страници действат като изглед на разширението. Когато изгледът трябва да знае някакво състояние (затваря прозореца, актуализира страницата …), той отправя заявката за състоянието към страницата, която се намира като фон. Когато фоновата страница уведомява, че е имало промяна в състоянието, тя информира изгледа, който трябва да бъде актуализиран, или да предприеме някои действия.

Форматът му е следният:

 {"name": "Моето разширение",… "background": {"скриптове": ["background.js"]},…}

Формат

Страници за събития: Преди да дефинирате следния атрибут, е необходимо да обясните за какво са страниците на събитията. Обща нужда от приложения и разширения е да имат един-единствен, дълготраен скрипт, който да обработва някаква задача или състояние. Това е целта на страниците на събитията. Страниците със събития се зареждат само когато е необходимо. Когато не прави активно нещо, то се разтоварва от кеша, освобождавайки памет и други системни ресурси.

Ползите от производителността са значителни, особено при устройства с ниска мощност. Ето защо се препоръчва да се използват повече страници със събития от фона.

Декларацията на страница със събитие във файла на манифеста ще бъде следната:

 {"name": "My extension", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Както можете да видите разликата, която има с Background, е постоянният атрибут, който ще има невярно състояние.

chrome_settings_ overrides: Използва се за презаписване на избрана конфигурация в Chrome. Този API е достъпен само за Windows.

Някои от тези конфигурации могат да бъдат началната страница (начална страница на браузъра, доставчик на търсене (доставчик на търсене) и т.н.

Пример за конфигурация:

 {"name": "My extension",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword ":" keyword .__ MSG_url_domain__ "," search_url ":" http: //www.foo.__MSG_url_domain__/s? q = {searchTerms} "," favicon_url ":" http: //www.foo.__MSG_url_domain__/favicon. ico "," offer_url ":" http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms} "," instant_url ":" http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms} " , "image_url": "http: //www.foo.__MSG_url_domain__/image? q = {searchTerms}", "search_url_post_params": "search_lang = __ MSG_url_domain__", "предложи_url_post_params": "предложи_ланг = __ MSG_url": MSG_url_domain = "instant_url_params_url_domain" __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternate_urls ": [" http: //www.moo.__MSG_url_doms? .noo .__ MSG_url_url_? q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …}

chrome_ui_ отменя: Това свойство на разширението се използва за презаписване на някои настройки в потребителския интерфейс на Chrome. Като например маркерите. Конфигурацията му е следната:

 {"name": "My extension",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…}

В този случай звездата, която браузърът има за любими, се елиминира.

chrome_url_ отменя: Това е начин да замените HTML файла от разширението за страница, която браузърът Google Chrome обикновено предоставя. Освен това можете също да презапишете неговия CSS и JavaScript код.

Разширение с тази конфигурация може да замени една от следните страници на Chrome:

Мениджър на отметки: Това е страницата, която се появява, когато потребителят избере опцията от менюто на мениджъра на отметки в менюто на Chrome или за Mac, елементът Мениджър на отметки в менюто Отметки.

Увеличете

История (история): Това е страницата, която се появява, когато потребителят избере историята от менюто на Chrome или, на Mac, елементът показва пълна история от менюто, намерено в опцията за история.

Увеличете

Нов раздел (нов раздел): Това е страницата, която се появява, когато потребителят създаде нов раздел или прозорец от браузъра. Можете също да получите достъп до тази страница, като поставите следния адрес в адресната лента: chrome: // newtab

Увеличете

ЗабележкаЕдно разширение може да презапише само една страница. Например, разширението не може да презапише отметките и на свой ред страницата с история.

 {"name": "My extension",… "chrome_url_overrides": {"newtab": "mypage.html" // опциите са newtab, history, bookmarks},…}

команди: Този команден API се използва за добавяне на клавишни комбинации, които задействат действие във вашето разширение. Например действие за отваряне на действието на браузъра или изпращане на команда към разширението.

 {"name": "Моето разширение",… "команди": {"toggle-feature-foo": {"Предложен_ключ": {"по подразбиране": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," description ":" Превключване на функцията foo "}," _execute_browser_action ": {" recommended_key ": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"предложен_ключ": {"по подразбиране": "Ctrl + Shift + E", "windows ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}},…}

На фоновата си страница можете да свържете контролер за всяка от командите, дефинирани в manifest.js (с изключение на „_execute_browser_action'Y'_execute_page_action') чрез onCommand.addListener.

Например:

 chrome.commands.onCommand.addListener (функция (команда) {console.log ('Командата е натисната:', команда);});

content_scripts: Те са javascript файлове, които се изпълняват в контекста на уеб страници. Използвайки стандартния обектен модел на документи (DOM), те могат да четат подробностите за уеб страниците на посещенията на браузъра или да ги променят.

 {"name": "Моето разширение",… "content_scripts": [{"съвпадения": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}

content_scripts: За да направим нашите разширения по-сигурни и да избегнем потенциални проблеми с скриптове между сайтове, системата за разширение на Chrome е включила общата концепция за Политика за защита на съдържанието (CSP). Това въвежда много строги правила, които ще направят разширенията по -сигурни по подразбиране. Като цяло CSP работи като механизъм за черен и бял списък за ресурсите, заредени или изпълнени от неговите разширения.

 {…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self" "…}

Това бяха едни от най -важните атрибути. За първоначалната си практика ще дефинираме файла manifest.json, както следва:

 {"manifest_version": 2, "name": "Пример за стартиране", "description": "Това разширение показва изображение от google изображения на текущата страница", "version": "1.0", "browser_action": {"default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," permissions ": [" activeTab "," https://www.googleapis.com/ "]}

Както можете да видите в нашия примерен манифест, ние декларирахме browser_action, activeTab разрешение за преглед на URL адреса на текущия раздел и на хоста беше дадено разрешение, по този начин може да бъде достъпен API на Google за извършване на търсене на външни изображения.

На свой ред, 2 файла с ресурси се намират при определяне на browser_action: icon.png.webp и popup.html. И двата ресурса трябва да съществуват в пакета с разширения, така че нека ги създадем сега:

icon.png.webp Той ще се показва до многофункционалното поле, в очакване на взаимодействие с потребителя. Това е само 19px x 19px PNG файл.

popup.html ще се покаже в изскачащия прозорец, който е създаден в отговор на кликването на потребителя върху иконата. Това е стандартен HTML файл и съдържанието му е следното:

Първи стъпки Изскачащ прозорец на разширението

Увеличете

2. Уверете се, че квадратчето за режим на програмист в горния десен ъгъл е поставено.

3. Щракнете върху Качване на разархивирано (разопаковано) разширение, за да изведете диалогов прозорец за избор на файл.

Увеличете

4. Придвижете се до директорията, където се намират вашите разширителни файлове, и я изберете.

Друга възможност е да плъзнете директорията, която съдържа вашия проект, и да я пуснете в прозореца за разширения на Chrome. Това ще зареди разширението във вашия браузър.

По този начин ще направим просто разширение за google Chrome. В следващата ни вноска ще се задълбочим в изграждането на разширения във връзка с рамки за разработка като jquery и Bootstrap, което ще ни позволи да опростим развитието си.

2. Пример за разширения за Chrome

В този раздел ще направим няколко примера, които ще ни позволят да разберем напълно много от функционалностите, които съществуват при изграждането на разширение за Google Chrome.

Практика 1 - Син фон
В този пример ще направим просто разширение, където ще научим как можем да променим съдържанието на страниците, които зареждаме в нашия браузър. В този случай ще променим цвета на фона на заредената страница и ще го променим на син.

Както обясних в първата част на този урок, можете да използвате всяка IDE за разработка, в моя случай ще използвам Chrome Dev Editor.

Увеличете

За начало ще създадем нова директория с името Син фон и ние ще създадем проект със същото име.

Увеличете

Вътре ще създадем първия си файл manifest.json която ще съдържа определенията на нашето разширение.

Увеличете

Нашият архив manifest.json трябва да съдържа следния код:

 {"manifest_version": 2, "name": "Blue Background", "description": "Това разширение промени цвета на фона на текущата страница", "version": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Направете тази страница синя"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Тъй като нашето разширение е просто, то ще съдържа само икона, която при натискане ще изпълни действие. Както можете да видите във файла manifest.json дефинираме име и неговото описание в browser_action Определяме иконата, която ще се показва в лентата на нашия браузър Google Chrome, и заглавие, което ще се показва, когато показалецът на мишката е позициониран върху иконата. По отношение на разрешенията ще определим, че това ще стане само в активния раздел. Файлът, който ще работи във фонов режим, ще бъде нашият файл background.js който няма да бъде постоянен, тъй като ще се изпълнява само когато кликнете върху разширението.

Ние създаваме нашата икона и я запазваме в директорията на проекта, както е определено в manifest.json. В този случай в корена на проекта.

След това създаваме JavaScript файл, наречен background.js в една и съща директория със следния код:

 // извиква се, когато потребителят кликне върху разширение chrome.browserAction.onClicked.addListener (функция (раздел) {console.log ('Промяна' + tab.url + 'на синьо!'); chrome.tabs.executeScript ({код: ' document.body.style.backgroundColor = "синьо" '});});

Оставяйки целия проект, както следва:

Увеличете

За да стартирате нашето разширение, всичко, което трябва да направите, е да натиснете бутона за възпроизвеждане, който се намира в горната лента на Chrome Dev Editor.

Увеличете

С натискането му разширението ще се зареди автоматично в браузъра Google Chrome.

Нека видим нашето разширение в действие, като щракнем върху иконата, която направих (син фон с буквата А в бяло), страницата, която заредих в текущия раздел, в моя случай потребителския ми акаунт в Solvetic (http: // www .solvetic… .berth-ramncgev /) ще промени фона на син. Трябва да се отбележи, че само цветът на елемента BODY ще се промени, а не DIV, които той съдържа, тъй като по този начин го дефинирах в моя background.js.

Увеличете

Практика 2 - MultipleColor
За този пример ще покажа как да оптимизираме работата си от IDE за разработка и от кода. В Chrome Dev Editor, кликваме върху бутона +, за да създадем нов проект, този път ще променим типа на проекта, като изберете опцията Приложение JavaScript за Chrome.

Увеличете

Както можете да видите, той автоматично генерира цялата структура на нашия проект. С нашия файл manifest.json с най -често срещаните определения.

Увеличете

Към този файл ще добавим кратко описание на етикета описание поставяне на желания от вас текст, в моя случай „Разширение, което позволява промяна на цвета на фона“. За този проект ще създадем 2 икони, едната от 16x16 пиксела, а другата от 128x128 пиксела, както можете да видите в структурата, те ще бъдат записани в директорията активи.

Ще добавим следния код под маркера минимална_хромна_версия:

 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Променете страницата на няколко цвята.", " default_popup ":" popup.html "},

Както можете да видите, ние дефинираме изскачащ прозорец или изглед, който ще съдържа целия html, който потребителят ще види, когато кликне върху нашето разширение. След това ще добавим следния код:

 "content_scripts": [{"съвпадения": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}]

content_scripts- Съдържа файлове с JavaScript (js) и таблица със стилове (css), които ще бъдат изпълнени в контекста на уеб страницата. Той може да съдържа следните свойства:

мачове: Задължителен. Конкретно към коя страница ще бъде инжектиран скриптът.

exclude_matches: По избор. Страници, които ще бъдат изключени, така че скриптът да не се инжектира.

match_about_blank: По избор. Тази стойност е Boolean и показва дали скриптът ще бъде вмъкнат в празната страница (about: blank и about: srcdoc).

css: По избор. Това е подредба, която показва списъка с css файлове, които ще бъдат вмъкнати на страницата, която се иска в браузъра.

js: По избор. Това е подредба със списъка с JavaScript файлове, които ще бъдат вмъкнати на страницата, която се иска в браузъра.

run_at: По избор. Това е текстов низ, който контролира кога ще се зареждат js файловете. Стойността му може да бъде:
document_start: Файловете се инжектират след всеки css файл, но преди да се изгради DOM или да се изпълни друг скрипт.

документ_край: Файловете се инжектират веднага след завършване на DOM, но преди зареждането на ресурси като изображения и рамки.

document_idle: Браузърът избира времето за инжектиране на скриптове между document_end и веднага след window.onload задейства събитието. Тази опция е тази, която е конфигурирана по подразбиране.

В края на нашия файл manifest.json Тя трябва да бъде следната:

Увеличете

Както можете да видите, добавихме няколко нови неща в имота css Дефинирахме рамката Bootstrap, която няма да улесни развитието на ниво стил. Последвано от имота js Определяме JQUERY JavaScript библиотеката, която няма да ни позволи да работим по -бързо и по -лесно всичко, което е свързано с JavaScript. Нашият файл index.html трябва да изглежда така:

 Изскачащ MultipleColorчервенСинЗеленоЖълто

Във файла index.html ние просто правим препратки към нашите Bootstrap, Jquery и main.js файлове. В тялото дефинираме контейнер за стартиране с неговите div, който ще служи като бутони за различните цветови опции.

За файла main.js ще използваме събитието click, което ще се изпълни при натискане на бутона на мишката върху всеки клас "col-md-12", като вземем цвета на фона на избрания елемент и го присвоим на тялото на е отворена страница. След това ще се изпълни събитието window.close (); които затварят прозореца на нашето разширение. Кодът, дефиниран за main.js, е следният:

 $ (document) .ready (function () {$ (". col-md-12"). click (function () {var color = $ (this) .css ("background-color"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});});

Резултатът при изпълнение на нашето разширение ще можем да визуализираме иконата, която сме създали за него в горната лента.

Щракването върху нашето разширение ще покаже следния изскачащ прозорец:

И когато избирате една от опциите, резултатът ще бъде следният:

Увеличете

Практика 3 - Топ история
В този пример ще приложим всичко, видяно по -горе, ще създадем разширение, което, когато кликнете върху него, ще ни покаже изскачащ прозорец със списъка на най -посещаваните страници от нашия браузър, даващ директен достъп до тези страници. Единственото различно нещо в този пример е, че ще поискаме разрешение от един от apis на Chrome за достъп до най -гледаните страници от Chrome. Името на този api е chrome.topSites.

За да започнем ние ще Chrome Dev Editor и създадохме нашия проект с името TopHistorial и в типа на проекта избираме опцията JavaScript за Chrome Chrome.

Тогава нашият файл manifest.json Тя трябва да бъде следната:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Показване на списъка с най -гледаните страници в нашия браузър", "version": "0.0.1", " minimum_chrome_version ":" 38 "," permissions ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" съвпада с ": [" "]," css ": [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]}}

Както можете да видите, добавяме нов атрибут към манифеста, за да можем да получим разрешение за api на Chrome: Декларирайте разрешения, се използва в повечето API на Chrome във вашето разширение, първо трябва да го декларирате, като поставите полето разрешения във вашия манифест. Всяко разрешение може да бъде текстов низ, принадлежащ към следния списък (разделен на 3 изображения):

Относно нашия файл popup.html Тя трябва да бъде следната:

 Изскачащ MultipleColor

Нашият архив main.js който ще съдържа api заявката и обработката на събитието click, то ще бъде представено по следния начин:

 $ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} функция buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Добавяне ('
' + най -посещаваните URL адреси [i] .title +'
'); } $ (". връзки"). bind ("щракване", отворена страница); } chrome.topSites.get (buildPopupDom); });

На структурно ниво нашият проект трябваше да бъде следният:

Когато изпълняваме нашето разширение, ще можем да видим икона в горната част на браузъра, която в моя случай го проектира в синьо, когато щракнете върху него, той отваря изскачащ прозорец със списъка със страници, до които имам най -голям достъп от моя браузър, подредени по броя посещения, които съм направил.

Увеличете