Создание простого расширения для Chrome

Это Вам так же может быть интересно!

Делитесь с друзьями в социальных сетях! Оставляйте комментарии!

Share/Save
test
chrome расширения Стала небольшая задача выполнять по клику на кнопку определенную функцию на странице. Вроде все бы ничего, да вот общение между расширением и самой страницей происходит достаточно изолированно, с весьма ограниченными механизмами обмена. Так, чтобы выполнить свой скрипт на странице расширение должно вставить свой скрипт на страницу. В тоже время чтобы его выполнить придется использовать обмен сообщениями и события.

Теперь немного более приземленно.
Создаем папку с расширением, например myclickbtn
В ней создаем файл manifest.json, подробно об этом файле описано во многих источниках. Содержимое:
{
  "manifest_version": 2,
  "name": "My Click Button",
  "description": "My Click Button description",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png", //иконка
    "default_popup": "popup.html" //код самого виджета будет лежать тут
  },
  "permissions": [
//права доступа
    "activeTab","debugger","tabs","pageCapture"
  ],
//внедряем свой скрипт в код страницы.
//он будет инициализировать прослушивание поступающих сообщений
//если получим нужное сообщение, будем запускать нашу функцию
  "content_scripts": [{
    "matches": [ "<all_urls>" ], //совпадения по url, можно использовать регулярные выражения
//тег <all_urls> говорит о том что будем вставлять код на всех страницах
    "js":         ["init.js"],//сам файл(ы) который(е) будем вставлять в страницу
    "run_at":     "document_end",//вставляем в конец документа
    "all_frames": false
  }]
}

Файл init.js:
//добавляем обработчик на получение сообщений
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log(sender.tab ?
        "from a content script:" + sender.tab.url :
            "from the extension");
        if (request.greeting == "hello")
//выполняем функцию
            SayHello();
//отправляем ответ
            sendResponse({farewell: "goodbye"});
    });

function SayHello(){
alert("Hello!");
}

Файл popup.html:
<!doctype html>
<html>
<head>
    <title>VK HotNK</title>
</head>
<body>
<h1>Action:</h1>
<img src="spinner.gif" id="spinner" style="display: none;">
<button id="hotnkclickaddfriends">Add To Friend List</button>
<script src="popup.js"></script>
</body>
</html>

Файл popup.js:
//цепляем обработку нажатия на кнопку в виджете
document.getElementById("hotnkclickaddfriends").addEventListener("click",
    function() {
//выбираем активную вкладку
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
//прячем кнопку и отображаем картинку лоадера
            document.getElementById("hotnkclickaddfriends").style.display = 'none';
            document.getElementById("spinner").style.display = 'block';
//отправляем сообщение на страницу
            chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
                console.log(response.farewell);
//после отправки сообщения и получения ответа
//отображаем кнопку и прячем лоадер
                document.getElementById("hotnkclickaddfriends").style.display = 'block';
                document.getElementById("spinner").style.display = 'none';
            });
        });
    }, false);

Все тоже и даже гораздо больше можно прочитать в документации.
На этом все. =)
Категория: 
Share/Save