Question

我正在创建一个Google Chrome扩展程序，该扩展程序使用的脚本在Google Chrome控制台中运行良好。

但是，我试图使用相同的脚本，而不仅仅是在控制台中打印信息。

如何在popup.html页面中以某种方式创建包含此信息的HTML

元素？我知道这个想法可能必须使用

中的回调函数

这是我的代码：

的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"));}'

需要帮助显示适用于Google Chrome扩展程序的DOM内容

0 个答案: