Как реализовать фичи в расширении?

Question

[vaflya]

День добрый!

Воспользовался поиском, смотрел документацию, но так ничего не понял. Подскажите:

1 - в расширении для chrome существует 3-и типа скриптов:

• background.js - в фоне работа с DOM нужных страниц
  
• popup.js - работа с интерфесом расширения
  
• content script - ???
  

2. При нажатии на расширение отображается список доступных proxy, он должен подгрузится с сервера www.proxybeatch.io. Запрос на получение и модификацию popup.html, popup.js не дает. Я так понял вся логика должна быть в background?

3. Не могу допетрить как общаться из background.js в popup.js

4. Как установить бэйдж не из popup.js а из background.js?

chrome.browserAction.setBadgeText({text: '10+'});
chrome.browserAction.setBadgeBackgroundColor({color: '#ff0000'});

5. Как сделать периодическую проверку новых прокси на серваке (в фоне раз в 1 час проверял списки на сервере и если есть новые, то выставлял бэйдж)?

6. Добавление прокси с вэб страницы:
То-есть на каком то сайте есть ссылка, по нажатию на которую добавляется (отправляется) строка с адресом ip в расширение (как в телеге). Такое возможно?

7. Когда открывается popup.html расширения, выглядит это как анимированное разворачивание, как отключить?

Если нужно, предоставлю скрипты и манифест(дал все возможные встречающиеся разрешения в доках)

Answer 1

[dollar]

1.

существует 3-и типа скриптов

Все три сразу можно и даже нужно, если требуется для целей расширения. Единственное, content script на все сайты пользователи не любят, т.к. расширение получает слишком много опасных с точки зрения приватности и безопасности прав. А вот content script на конкретный сайт (со ссылками на прокси) или 2-3 сайта - можно, это выглядит хорошо.

2.

Запрос на получение и модификацию popup.html, popup.js не дает

Расширению нужны права на доступ к www.proxybeatch.io (либо доступ вообще ко всем сайтам):
"permissions": [ "https://www.proxybeatch.io/*" ],

3.

как общаться из background.js в popup.js

Никак.
popup.js - временный скрипт. Он выгружается, когда закрывается окно. Хотя это зависит от браузера, может остаться фантомно - это тонкий момент, который нужно учесть при разработке для Firefox и Chrome одновременно.
Вообще можно из popup обратиться к background и там оставить ссылку на себя. Но обращение по этой ссылке опасно.
Лучше делать так: в background происходят все основные процессы и имеют разную степень готовности. А popup просто получает готовую инфу и отображает её. Сам popup при этом никуда не стучится, а отдает задания для background, который уже неспешно занимается обновлением и сортировкой данных.

4.

бэйдж не из popup.js а из background.js

Не знаю, в чем сложность. Бейдж устанавливается абсолютно также. Вероятно, у вас какой-то баг в коде.

5.

Как сделать периодическую проверку

setInterval()
Ну или есть вариант через alarms, но в целом без разницы.

6.

прокси с вэб страницы. Такое возможно?

Возможно. Это должен быть либо ваш сайт, либо вы должны хорошо знать формат, в котором представлены списки прокси. Проблема решается контент скриптом для данного конкретного сайта. Этот скрипт добавляет к ссылкам соответствующий обработчик, или даже целую кнопку рядом с инфой о прокси.

7.

анимированное разворачивание popup, как отключить?

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

Comments

[vaflya]

dollar

Расширению нужны права на доступ к www.proxybeatch.io (либо доступ вообще ко всем сайтам):
"permissions": [ "https://www.proxybeatch.io/*" ]

Дал расширение ко всем сайтам. ["<all_urls>"]
Я так же подключаю JQUERY.
В popup.js

$.ajax({
  url: ''proxybeatch.io,
	dataType: "json", 
        success: function(data){
            $('main').append('data')
  }
});

Но ничего не происходит. Возможно запрещены ajax запросы из popup?

[vaflya]

Manifest.js

{
    "manifest_version": 2,
    "name": "Proxybeatch",
    "description": "Прокси для Chrome",
    "version": "0.1",
    "homepage_url": "http://Proxybeatch.io",
    "icons": {
        "128": "icon_128.png"
     },

    "content_scripts": [
     {
        "js": [
            "jquery-3.3.1.min.js",
            "background.js"
        ],
        "run_at": "document_start",
        "matches": [
            "*://*.Proxybeatch.io/*"
        ], 
        "all_frames": true
     }
    ],

    "background": {
        "scripts": [
            "jquery-3.3.1.min.js",
            "background.js"
        ]
    },
 
    "browser_action": {
        "default_icon": "icon_128.png",
        "default_popup": "popup.html",
    },

    "permissions": [
        "<all_urls>",
        "cookies",
        "storage",
        "notifications",
        "activeTab",
        "tabs",  
        "webRequest",    
        "webRequestBlocking",
        "*://*/*",
        "background",
        "browsingData",
        "contextMenus"
    ]
}

[dollar]

vaflya,

Но ничего не происходит.

Так нельзя отлаживать) Нужно смотреть, что происходит.
Т.е. какая ошибка в консоли или если код вообще не выполняется, то какие условия не срабатывают.

[dollar]

"content_scripts": [
  {
    "js": [
      "background.js"

Серьезно?!
Не нужно background засовывать в страницу. Сделайте отдельный скрипт для данного сайта. И почему-то Proxybeatch с большой буквы везде, не хорошо. Кстати, proxybeatch.io (без www) вроде не попадает под шаблон "*://*.proxybeatch.io/*"

[vaflya]

dollar, отладка расширения для меня боль...

Вообщем смотрю network, запросы XHR не происходили
В консоли нет ошибок

Расширение выдало ошибку

Uncaught ReferenceError: $ is not defined

popup.html

<!doctype html>
<html>
<head>
    <title>Proxybeatch.io</title>

    <!-- meta tags -->
    <meta charset="utf-8">

    <!-- styles sheets -->
    <link rel="stylesheet" href="/css/common.css">

    <!-- javascripts -->
    <script src="jquery-3.3.1.min.js"></script>
    <script src="popup.js"></script>
</head>
     <body>
        <main>
        </main>
    </body>
</html>

[vaflya]

dollar,

"content_scripts": [
{
"js": [
"background.js"

Где то увидел в интернете

[vaflya]

dollar, p.s. Домен не настоящий, не купленный... не хот ел бы чтоб перехватили его. Поэтому меняю вручную.

[vaflya]

dollar, то есть "content_scripts" отвечают за встраивание в сайт, для работы с DOM сайта. Background.js это постоянно запущенный скрипт? А popup.js используется только когда пользователь кликнул на иконку расширения? Верно?

[dollar]

то есть "content_scripts" отвечают за встраивание в сайт, для работы с DOM сайта. Background.js это постоянно запущенный скрипт? А popup.js используется только когда пользователь кликнул на иконку расширения? Верно?

Да.

[vaflya]

dollar, значит я:
1. через setInterval () в background.js каждый час проверяю на сервере обновления. Записываю в storage
2. в popup.js при клике считываю storage и отрисовываю html.

Верно?

[dollar]

Да, можно так.
Отладка расширения очень простая, нужно открыть отдельное окно с devtools.
Это кнопка "фоновая страница" плюс есть кнопка "ошибки":

spoiler

[vaflya]

dollar, ДА, так и делаю. Неопытность в этом ремесле, я думаю, создает мне неудобства)

[vaflya]

dollar,

background.js

function getUpdates()
{
  console.log('Updates... strat! ');
  $.ajax({
    url: server + '/api/updates', 
    success: function(data){
      chrome.storage.local.set({'updates': data + Date.now()}, function() {
        console.log('Value is set to ' + data + Date.now());
      });
    }
  });   
}

getUpdates();

В консоль выводится, а вот запись в storage на фоновой странице (devtools) я не вижу. Не там смотрю или не происходит запись?

devtools->application->local storage

[dollar]

vaflya, оно не отображается в devtools. Используйте либо localStorage, либо свой скрипт в консоли, либо какое-нибудь расширение (это пример, я не рекомендую использовать именно это).

[dollar]

Свой скрипт, я имею в виду в консоли ввести что-то такое:

chrome.storage.local.get(null, function (data) { console.info(data) });

Ну и под ваши нужды скрипт можно сделать сложнее.

[vaflya]

dollar, не получается из popup.js получить запись из storage записанную в background.js

popup.js

function getStorage(key)
{
    var ar = [];
    ar.push(key);
    chrome.storage.sync.get(ar, function(obj) {
        return obj[ar[0]];
        //console.log('Value currently is ' + obj.key);
    });
}

console.log(getStorage('updates'));

background.js

function getUpdates()
{

  $.ajax({
    url: server + '/api/updates', 
    success: function(data){
      
      setStorage('updates', data);
      getStorage('updates');

  
    }
  }); 
}


function setStorage(key, value)
{
    chrome.storage.sync.set({[key]: value}, function() {
          console.log('Value is set to ' + value);
        });
}

function getStorage(key)
{
    var ar = [];
    ar.push(key);
    chrome.storage.sync.get(ar, function(obj) {
        return obj[ar[0]];
        //console.log('Value currently is ' + obj.key);
    });
}


getUpdates();

пишет

undefined

[dollar]

Интересно вы с промисами обращаетесь. А вас не смущает, что return находится во вложенной асинхронной функции и возвращает значение в никуда?

[dollar]

Попробуйте так для начала:

Костыль

var result;

function getStorage(key)
{
    var ar = [];
    ar.push(key);
    chrome.storage.sync.get(ar, function(obj) {
        result = obj[ar[0]];
        //console.log('Value currently is ' + obj.key);
    });
}

getStorage('updates');

setTimeout(e=>console.log(result), 1500);

Это для понимания, а не для использования. А так вам нужно изучать промисы и документацию по chrome.storage с примерами.

[vaflya]

dollar, узнал что такое промисы, спасибо!

вопрос еще по поводу:
отлова ссылки с данными прокси.

я хочу сделать универсальную ссылку (в планах android приложение смастерить из г. и палок)

тоесть если на странице есть к примеру
a href='proxybeatch://?ip=128.0.0.1&name=jamaika Получить прокси Ямайка

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

[dollar]

А чем смущает поиск ссылок на странице?

let arr = document.querySelectorAll('a');
arr.forEach(e=>{
  if (e.href ....... ) {
    e.addEventListener("click", ......);
  }
});

[vaflya]

dollar, поиск ссылок в принципе не смущает. Я думал скорость хрома начнет просидать... А еще интересует сделать ссылки которые в приложениях смогут открываться, только не смог нагуглить толком. Подскажите, если знаете

[dollar]

ссылки которые в приложениях смогут открываться

Это как?

[vaflya]

dollar,

<a href="tg://proxy?server=vamtlgrm.drproxy.pro&amp;port=1011&amp;secret=d56b62206b7f72baac5e39335bf6faad">http://vamtlgrm.drproxy.pro/</a>

[dollar]

Не знаю, надо гуглить.
Мы уже очень сильно отклонились от изначальной темы вопроса :)

[vaflya]

dollar, ради Христа, аргумент?))) Понял, спасибо!

Answer 2

[vaflya]

3. Как общаться из background.js в popup.js

Один из вариантов через storage:
manifest.js

"permissions": [
        "storage"
  ]

background.js

function getUpdates()
{
  $.ajax({
    url: server + '/api/updates', 
    success: function(data){
      setStorage('updates', data);
    }
  }); 
}

function setStorage(key, value)
{
    chrome.storage.local.set({[key]: value}, function() {
          console.log('Value is set to ' + value);
        });
}

popup.js

function getStorage(key) {
    var ar = [];
    var data = '';
    ar.push(key);
  return new Promise(function(resolve, reject) {
    chrome.storage.local.get(key, function(obj) {
      if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError.message);
        reject(chrome.runtime.lastError.message);
      } else {
        resolve(obj[ar[0]]);
      }
    });
  });
}
getStorage('updates').then(function(item) {
  console.log(item);
});;