0

I am creating a Google Chrome Extension that uses a script that works perfectly well in Google Chrome's console.

However, I am trying to use this same script beyond just printing the information in console.

How would I be able to somehow create HTML

elements that contain this information within the popup.html page? I know that this idea might have to use the callback function within

Here is my code:

manifest.json

{
"manifest_version": 2,
"name": "MR QC Auditor View",
"version": "1.0",
"description": "This Google Chrome extension shows Ad ID's for print ads, and then links to Ad Tagger for tagging corrections",
"icons": {
    "128": "MRLogo128.png",
    "48": "MRLogo48.png",
    "16": "MRLogo16.png"
},
"browser_action":{
    "default_icon": "MRLogo16.png",
    "default_popup": "popup.html"
},
"permissions": [
    "storage",
    "tabs",
    "activeTab"
]}

popup.html:

<!DOCTYPE html>
<html>
    <head>
        <title>MR QC Auditor View</title>
        <script src="jquery-3.3.1.min.js">
        </script>
        <script src="popup.js">
        </script>
    </head>
    <body>
        <img src="MRLogo128.png"/>
        <h1>Current Ad's Brand: <h1><span id="brandNameText"></span>
        <h2>Link To Ad Tagger</h2><span><a href="http://www.google.com">Link</a></span>
    </body>
</html>

popup.js:

// Current Post To Look At:
// https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom

// Related Google + Group Post:
// https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/9Sue8JRwF_k

// Use chrome.runtime.onMessage()
// Documentation:
// https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript

// chrome.tabs.executeScript():
// https://developer.chrome.com/extensions/tabs#method-executeScript

/*
Old Code Block;

chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function () { chrome.tabs.executeScript({code: 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); ', allFrames: true}, function(stuff){
    chrome.runtime.sendMessage({greeting: "hello"}, function(){
        // Call chrome.runtime.sendResponse()
        // console.log("DOM Content Sent To Chrome Extension Webpage");
    })
}}); });
*/

// Added an array called "adArray" that utilizes the .push() JavaScript array function

// I need to somehow add this to the popup.html page itself, look for the StackOverflow related pages.

chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function (adArray) { chrome.tabs.executeScript({code: 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); var adArray = []; for (var i = 0; i<printAds.length; i++){console.log("Current Ad Id = " + $(printAds[i]).attr("data-adid")); adArray.push($(printAds[i]).attr("data-adid"))}', allFrames: true}); });

/* 

Console Based Code That Works:

$("#ad-image printadviewable pointer").find("img").attr("data-adid");


var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); 

for (var i = 0; i<printAds.length; i++){console.log("Current Ad Id = " + $(printAds[i]).attr("data-adid"));}
*/

// One Line Version For Code Dictionary Key
// 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); for (var i = 0; i<printAds.length; i++){console.log("Current Ad Id = " + $(printAds[i]).attr("data-adid"));}'
WebscraperGuru
  • 1
  • 1
  • getElementsByClassName is the wrong function. Use querySelectorAll and restore # in the selector. Or use `$` since you inject jQuery anyway. – wOxxOm May 10 '18 at 18:52
  • Regardless, it works in console, and this is how I want it to work. Is there any way I can display this array within the popup.html webpage? – WebscraperGuru May 14 '18 at 18:06
  • The array name should be the last statement inside the injected code, then it'll be passed into the executeScript's callback, [example](//stackoverflow.com/a/14828551) - note the result is an array so your array is in result[0] – wOxxOm May 14 '18 at 18:17
  • Another note, I rethought this example, and decided to create a paragraph element using document.createElement("p") called "adsParagraph", and appended the adArray to that paragraph using .innerHTML. I then updated the webpage, popup.html, with a
    tag that has an id="adListContainer", and appended that new paragraph element to that
    tag using .appendNewChild()
     – WebscraperGuru May 14 '18 at 18:18
  • new code: chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function (adArray) { chrome.tabs.executeScript({code: 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); var adArray = []; for (var i = 0; i – WebscraperGuru May 14 '18 at 18:19
  • chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function (adArray){ chrome.tabs.executeScript({ code: 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); var adArray = []; for (var i = 0; i – WebscraperGuru May 18 '18 at 17:49
  • ^ The above comment is the newest code. I included a return statement. Would that be sufficient to be displayed on the popup.html page? I created a DOM based object using by adding to an existing
    tag on popup.html named "adListContainer". I then used .appendNewChild() to add the existing adsParagraph variable which will contain this ad list. Is this the right approach?
     – WebscraperGuru May 18 '18 at 17:52
  • Any ideas or should I repost this into a separate section on Stackoverflow? – WebscraperGuru May 22 '18 at 17:46

0 Answers0