Как взаимодействовать с объектами на странице из расширения?

Question

Пишу простое расширение, в котором есть только 1 поле input type='text'

Что оно должно делать: В поле вставляется цифровое значение, порядка 13 знаков(к примеру: 1347258117916)которое обрезается. После чего необходимо на открытой вкладке просто чекнуть соответствующий checkbox Поиск в сети окончательно меня запутал с решением этого вопроса.

В manifest.json у меня вот что:

{
    "permissions": ["activeTab", "declarativeContent", "storage"],
    "content_scripts": [ {
        "run_at": "document_start",
        "matches": ["*://url", "https://url"],
        "all_frames": true,
        "js": [ "jquery.js", "background.js" ],
        "css": [ "style.css" ]
   }],
    "web_accessible_resources": [ 
        "jquery.js" 
    ],
   "browser_action": {
        "default_popup": "main.html",
        "matches": ["*://url", "https://url"],
        "default_icon": "App.png",
        "default_title": "Exten$ion"
   },
   "icons": {
      "128": "App.png"
   },
   "manifest_version": 2
}

Самый Обычный main.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <input id="ti_num" type="text" style="width:350px;height:15px;" value="">
    <script src="jquery.js"></script>
    <script src="popup.js"></script>
    </body>
</html>

код из Popup.js, который подключается в main.html

$(document).ready(function(){
$('#ti_num').each(function () {//функция очистки
    $(this).data('defvalue', this.value);
});

$('#ti_num').on('input', function(){
        str = $('#ti_num').val();
        res = str.substring(4,11);
        propt = 'table_checkbox_'+res;
        chrome.extension.sendMessage({propt});
        console.log(propt);
        /* Очистка Input, для вставки следующего значения
    $('#ti_num').each(function () {
            $(this).val($(this).data('defvalue'));
        });*/
    });
});

код в background.js

chrome.extension.onMessage.addListener(function(propt){
    console.log(propt);
    $('input:checkbox[name='+propt+']').attr('checked',true);
});

В таком виде выполняется тольк обработка вставленного числа, чекбокс не чекается и консоль чистая, без какой-либо ошибки. Совсем запутался, как правильно передать переменную propt из окна расширения в background.js, чтобы нужный чекбокс чекнуть?

Answer 1

Чтобы передать пелеменную propt, в bg.js - нужно всего лишь каждое утро... (код белоу)

// любой файл.js расширения:
let propt = 'text';
chrome.runtime.sendMessage({message: 'propt', value: propt});

// background.js
chrome.runtime.onMessage.addListener((r, sender, sR)=>{
    console.log(r.message, r.value);
    if(r.message === 'propt'){
        // код
        sR(true);
    }
});

Как отправить, с любого скрипта расширения, пелеменную - в активную вкладку:

// любой файл.js расширения (popup.js):
let propt = 'text';
chrome.tabs.query({active: true}, ([tab])=>{
    chrome.runtime.sendMessage(tab.id, {message: 'heyActiveTab', value: propt});
});

// content_scripts.js на активной вкладке
chrome.runtime.onMessage.addListener((r, sender, sR)=>{
    console.log(r.message, r.value);
    if(r.message === 'heyActiveTab'){
        // code here
        alert(r.value);
        sR(true);
    }
});

Некоторые "замечания" и чтиво:

прочитать и это (структура)
прочитать, про пелеменные (научись их создавать)
по экстету overview да и вообще гайд
это читать, если есть 18+ уже, вернее es6
также про папки не забывай, почему структура файлов - елена полено
await реди локального файла.. 1 строка попаута, как по мне - не нужна
функция очистки $('#ti_num').val('');, btw jq селектор по иду отдает 1 элемент всегда, ич бесполезен

Answer 2

Проблема была в отправке. Помог пример из справки.

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {message: 'messages', value: propt});
});

БЛОГ НА HUSL

Как взаимодействовать с объектами на странице из расширения?

Ответы (2 шт):