Расширение Chrome как отправлять данные из сценария содержимого в popup.html

97

Я знаю, что об этом спрашивали в многочисленных сообщениях, но, честно говоря, я их не понимаю. Я новичок в JavaScript, расширениях Chrome и всем остальном, и у меня есть это назначение класса. Поэтому мне нужно создать плагин, который будет подсчитывать объекты DOM на любой странице с помощью междоменных запросов. До сих пор мне удавалось добиться этого с помощью API расширения Chrome. Теперь проблема в том, что мне нужно показать данные на моей странице popup.html из файла contentScript.js. Я не знаю, как это сделать. Я пробовал читать документацию, но при обмене сообщениями в хроме я просто не могу понять, что делать.

Ниже приведен код на данный момент.

manifest.json

{
"manifest_version":2,

"name":"Dom Reader",
"description":"Counts Dom Objects",
"version":"1.0",

"page_action": {
    "default_icon":"icon.png",
    "default_title":"Dom Reader",
    "default_popup":"popup.html"
},

"background":{
    "scripts":["eventPage.js"],
    "persistent":false
},

"content_scripts":[
    {
        "matches":["http://pluralsight.com/training/Courses/*", "http://pluralsight.com/training/Authors/Details/*",                                          "https://www.youtube.com/user/*", "https://sites.google.com/site/*", "http://127.0.0.1:3667/popup.html"],
        "js":["domReader_cs.js","jquery-1.10.2.js"]
        //"css":["pluralsight_cs.css"]
    }
],

"permissions":[
    "tabs",
    "http://pluralsight.com/*",
    "http://youtube.com/*",
    "https://sites.google.com/*",
    "http://127.0.0.1:3667/*"
]

popup.html

<!doctype html>
<html>

    <title> Dom Reader </title>    
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script src="popup.js" type="text/javascript"></script>

<body>
    <H1> Dom Reader </H1>
    <input type="submit" id="readDom" value="Read DOM Objects" />

   <div id="domInfo">

    </div>
</body>
</html>

eventPage.js

var value1,value2,value3;

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action == "show") {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.pageAction.show(tabs[0].id);
    });
}

value1 = request.tElements;
});

popup.js

$(function (){
$('#readDom').click(function(){
chrome.tabs.query({active: true, currentWindow: true}, function (tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "readDom"});

 });
});
});

contentScript

var totalElements;
var inputFields;
var buttonElement;

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse){
if(request.action == "readDom"){

    totalElements = $("*").length;
    inputFields = $("input").length;
    buttonElement = $("button").length;


}
})

chrome.runtime.sendMessage({ 
action: "show", 
tElements: totalElements, 
Ifields: inputFields, 
bElements: buttonElement 

});

Любая помощь будет оценена по достоинству, и, пожалуйста, избегайте каких-либо недомоганий, которые я сделал :)

javascript  jquery  html  google-chrome  google-chrome-extension 
— Sumair Baloch
источник

Ответы:

175

Хотя вы определенно находитесь в правильном направлении (и на самом деле довольно близко к концу), в вашем коде есть несколько (imo) плохих практик (например, внедрение всей библиотеки (jquery) для такой тривиальной задачи, объявление ненужных разрешений, создание лишних вызовы методов API и т. д.).
Я сам не тестировал ваш код, но, судя по быстрому обзору, считаю, что исправление следующего может привести к рабочему решению (хотя и не очень близкому к оптимальному):

  1. В manifest.json : измените порядок сценариев содержимого, поставив сначала jquery. Согласно соответствующим документам :

    "js" [...] Список файлов JavaScript, которые будут вставлены на соответствующие страницы. Они вводятся в том порядке, в котором они появляются в этом массиве.

    (курсив мой)

  2. В contentscript.js : Перемещение chrome.runtime.sendMessage ({...}) блок внутри на onMessageслушателя обратного вызова.

Тем не менее, вот мой предлагаемый подход:

Поток управления:

  1. Сценарий содержимого вводится на каждую страницу, соответствующую некоторым критериям.
  2. После внедрения сценарии содержимого отправляют сообщение на страницу события (также известную как непостоянная фоновая страница), а страница события прикрепляет действие страницы к вкладке.
  3. Как только всплывающее окно действия страницы загружается, оно отправляет сообщение сценарию содержимого, запрашивая необходимую информацию.
  4. Сценарий содержимого обрабатывает запрос и отвечает, чтобы всплывающее окно действия страницы могло отображать информацию.

Структура каталога:

          root-directory/
           |_____img
                 |_____icon19.png
                 |_____icon38.png
           |_____manifest.json
           |_____background.js
           |_____content.js
           |_____popup.js
           |_____popup.html

manifest.json:

{
  "manifest_version": 2,
  "name": "Test Extension",
  "version": "0.0",
  "offline_enabled": true,

  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },

  "content_scripts": [{
    "matches": ["*://*.stackoverflow.com/*"],
    "js": ["content.js"],
    "run_at": "document_idle",
    "all_frames": false
  }],

  "page_action": {
    "default_title": "Test Extension",
    //"default_icon": {
    //  "19": "img/icon19.png",
    //  "38": "img/icon38.png"
    //},
    "default_popup": "popup.html"
  }

  // No special permissions required...
  //"permissions": []
}

background.js:

chrome.runtime.onMessage.addListener((msg, sender) => {
  // First, validate the message's structure.
  if ((msg.from === 'content') && (msg.subject === 'showPageAction')) {
    // Enable the page-action for the requesting tab.
    chrome.pageAction.show(sender.tab.id);
  }
});

content.js:

// Inform the background page that 
// this tab should have a page-action.
chrome.runtime.sendMessage({
  from: 'content',
  subject: 'showPageAction',
});

// Listen for messages from the popup.
chrome.runtime.onMessage.addListener((msg, sender, response) => {
  // First, validate the message's structure.
  if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) {
    // Collect the necessary data. 
    // (For your specific requirements `document.querySelectorAll(...)`
    //  should be equivalent to jquery's `$(...)`.)
    var domInfo = {
      total: document.querySelectorAll('*').length,
      inputs: document.querySelectorAll('input').length,
      buttons: document.querySelectorAll('button').length,
    };

    // Directly respond to the sender (popup), 
    // through the specified callback.
    response(domInfo);
  }
});

popup.js:

// Update the relevant fields with the new data.
const setDOMInfo = info => {
  document.getElementById('total').textContent = info.total;
  document.getElementById('inputs').textContent = info.inputs;
  document.getElementById('buttons').textContent = info.buttons;
};

// Once the DOM is ready...
window.addEventListener('DOMContentLoaded', () => {
  // ...query for the active tab...
  chrome.tabs.query({
    active: true,
    currentWindow: true
  }, tabs => {
    // ...and send a request for the DOM info...
    chrome.tabs.sendMessage(
        tabs[0].id,
        {from: 'popup', subject: 'DOMInfo'},
        // ...also specifying a callback to be called 
        //    from the receiving end (content script).
        setDOMInfo);
  });
});

popup.html:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <h3 style="font-weight:bold; text-align:center;">DOM Info</h3>
    <table border="1" cellpadding="3" style="border-collapse:collapse;">
      <tr>
        <td nowrap>Total number of elements:</td>
        <td align="right"><span id="total">N/A</span></td>
      </tr>
      <tr>
        <td nowrap>Number of input elements:</td>
        <td align="right"><span id="inputs">N/A</span></td>
      </tr>
      <tr>
        <td nowrap>Number of button elements:</td>
        <td align="right"><span id="buttons">N/A</span></td>
      </tr>
    </table>
  </body>
</html>
— гкалпак
источник
Вот это да ! Спасибо, брат, теперь проверяю твой подход, я чувствую, сколько проблем я создал с помощью своего кода. Большое спасибо, это работает как шарм. :)
— Sumair Baloch
привет, извини, я не был в эфире некоторое время, только что проверил твой комментарий. Я не могу принять ни одного ответа. там сказано, что для этого вам нужно 15 очков репутации.
— Sumair Baloch
Не могли бы вы помочь мне решить очень похожую проблему? <a href=" stackoverflow.com/questions/34467627/…> Мой текущий снимок - это в значительной степени ваш код из этого ответа. Но я все еще не могу заставить его работать и, похоже, не могу найти никакой хорошей помощи по этому вопросу.
— wuno
почему вы использовали chrome.tabs.sendMessagepopupjs и chrome.runtime.onMessage.addListenercontent.js почему .tabsдля popupjs и .runtimecontent.js
— Хабиб Каземи,
2
@hkm: Потому что именно так вы отправляете и получаете сообщения. Это все в документации .
— gkalpak
7

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

в contentScript.js:

chrome.runtime.sendMessage({
  total_elements: totalElements // or whatever you want to send
});

в eventPage.js (ваша фоновая страница):

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse){
       localStorage["total_elements"] = request.total_elements;
    }
);

Затем вы можете получить доступ к этой переменной в popup.js с помощью localStorage ["total_elements"].

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

Хорошее чтение о localStorage: http://diveintohtml5.info/storage.html

— gthacoder
источник
1
Пожалуйста, не продвигайте использование устаревшего chrome.extension.onRequest / sendRequest (который, кстати, не загружает непостоянную фоновую страницу перед выполнением). Вместо этого используйте chrome.runtime. * .
— gkalpak
1
@ExpertSystem Если вы видите такую ​​устаревшую информацию, предложите / внесите правку.
— Xan
3
@Xan: Итак, вы преемник [Google-Chrome-Extension] :) Я не люблю редактировать посты людей (считаю это слишком навязчивым). Кроме того, с таким количеством устаревших руководств и примеров (по крайней мере, в то время) я решил, что лучше иметь явный комментарий о том, почему это плохо в использовании .extension.xxx, вместо того, чтобы просто указывать правильный путь (который некоторые люди могут подумать как " одинаково ж альтернатива "). Думаю, это больше вопрос стиля. Продолжайте хорошую работу !
— gkalpak
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.