Рубрики
Без рубрики

Как написать расширение Chrome из кода фрагментов JavaScript

Расширения Chrome можно легко создать из простого кода JavaScript, который вы можете запустить из фрагментов инструментов для браузера Dev. Tagged с JavaScript, Chrome, расширениями.

Написать расширение Chrome довольно просто (получить его в магазине Chrome намного сложнее!). В этом посте я возьму код фрагмента, который я написал, для создания контрстремов и преобразования в хромированном расширении.

У меня есть видео, показывающее полный процесс внизу поста. Текст в основном резюме.

Вы можете найти код для этого Расширение хрома на GitHub

Краткое изложение контактов

Контрстроринг – это такая строка *3*5*7*9*12*15* где * Представляйте позицию в строке числа, немедленно выполняя его.

Манифест

Сначала нам нужно создать manifest.json файл.

Это объявляет имя и версию расширения и ссылки на используемые сценарии. Это также, где вы объявляете разрешения, которые вам нужны.

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

Начните с основного манифеста, как задокументировано в Хромированный учебник и создайте его, когда вы добавляете код.

например Я начал с

~~~~ {“manifest_version”: 2, “name”: “Conterstring”, “Версия”: “0.1”, “Описание”: “Простая генерация контрстронга”} ~~~~

И к тому времени, когда я закончил, это стало:

~~~~ {“manifest_version”: 2, “name”: “Conterstring”, “Версия”: “0.1”, “Описание”: “Простая генерация контрстроин “: [” js/founal.js “]}”/Кон48×48.png “,” 128 “:” Icons/icon128x128.png “}} ~~~~

Founal.js

founal.js Где вы, вероятно, построите большую часть своего расширения.

Я хотел создать самое простое расширение, о котором я мог придумать, и я подумал, что иметь меню правого щелчка будет самым простым. И это действительно все мое расширение.

Я использовал документацию для контекстных меню:

Это сказало мне добавить "Contextmenus" разрешение. Также я определил контекстное меню, чтобы появиться только тогда, когда я щелкну правой правой кнопкой мыши на редактируемый веб -элемент «Контексты»: [«Редактируемый»] Анкет

Потому что мой контрстроп будет добавлен в этот веб -элемент.

~~~~ contextmenus.createCounterstring = chrome.contextmenus.create ({“title”: “генерировать контрстроин ошибка (chrome.runtime.lasterror.message);}}); ~~~~

Чтобы справиться с кликами в контекстном меню, я добавляю слушателя.

~~~~ chrome.contextmenus.onclicked.addlistener (contextmenuhandler); ~~~~

И затем функция, которая обрабатывает контекстное меню, использует chrome.tabs.executescript Чтобы ввести какой -то JavaScript в Active вкладку.

~~~~ Функция ContextMenUhandler (Info, Tab) {

if(info.menuItemId===contextMenus.createCounterString){
    chrome.tabs.executeScript({
        file: 'js/counterstring.js'
      });
}

} ~~~~

Counterstring.js

Counterstring.js – это точный код, который я написал как фрагмент , но я сохранил это как Counterstring.js файл

~~~~ function reversestring (reverseme) {return reverseme.split (“”). reample (). join (“” “); }

function getCounterstring (count) {

var counterString = "";

while(count>0){

    var appendThis = "*" + reverseString(count.toString());

    if(appendThis.length>count){
        appendThis = appendThis.substring(0,count);
    }    

    counterString = counterString + appendThis;

    count = count - appendThis.length;
}

return reverseString(counterString);

}

var.prompt (“Длина контрстроринга? “,” 100 “); var (count); console.log (counterstring);; ~~~~

Постоянный фон

Чтобы ввести мой код, мне нужно было сделать фон.

Значки

Chrome ожидает, что расширения будут иметь значки, как описано здесь:

На самом деле вам не нужно делать это при написании вашего расширения, это помогает, но вам действительно нужно это только тогда, когда вы хотите выпустить в Chrome Store.

Запуск расширения из кода

Чтобы запустить расширение, вы должны:

  • Посетите Chrome://расширения
  • Включите режим разработчика
  • Нажмите «Загрузить распаковку»
  • Выберите папку Extension (такая с Manifest.json в ней)

видео

Я создал видео, показывающее это в действии.

В видео вы увидите полный процесс и как отладить расширение, когда возникают ошибки:

  • Как преобразовать существующий код JavaScript в расширение Chrome
  • Основная структура расширения, manifest.json, фоновый скрипт и сценарии контента
  • Разрешения в расширениях: Contextmenus, ActiveTab
  • Как создать контекстные меню для расширений
  • Как изменить, где отображаются контекстные меню: контексты, редактируемые
  • Зачем использовать постоянный фонарец
  • Как динамически вводить сценарии контента в страницу, используя exectuctript
  • Как использовать слушателей с контекстными меню

Код

И вы можете найти исходный код на GitHub.

Первоначально опубликовано в Eviltester.com

Оригинал: “https://dev.to/eviltester/how-to-write-a-chrome-extension-from-javascript-snippets-code-3o9h”

Читайте ещё по теме: