Having Trouble Accessing Current Tab's URL Via chrome.tabs.query()

3,795 views
Skip to first unread message

webscra...@gmail.com

unread,
Apr 10, 2018, 2:35:15 PM4/10/18
to Chromium-Extensions-Announce
Hello everyone,

I'm trying to create a Google Chrome Extension that basically rips the current tab's URL, and other DOM content. I've tried following various YouTube tutorials, but this process of making extensions is still pretty daunting.

Just to keep it simple at first, my first goal is to rip the URL out from the current tab. I later want to access specific DOM based content, which would include HTML content for a specific image of a webpage, since I can rip certain useful information for the extension. If someone can please help me simplify this, so I can get my Google Chrome extension up and running, I would really appreciate this. Thanks!

Here is what I have so far via code, please let me know (I have 3 different size variant logos included in my project file called MRLogo128.png, MRLogo16.png, and MRLogo48.png as well, but am not including them because they're unnecessary to help debug my code)

background.js:

chrome.tabs.query({active: true, lastFocusedWindow: true}, function(arrayOfTabs) {
var tab = arrayOfTabs[0];
var url = tab.url;
console.log("URL = " + url);
chrome.storage.sync.set({"currentTabURL": url}, function(){
console.log("currentTabURL: " + url);
});
});

function accessCurrentTabURL(){
chrome.storage.sync.get(["currentTabURL"], function(result){
console.log("URL of current Tab: " + result.currentTabURL);
};
}

accessCurrentTabURL();

jquery-3.3.1.min.js (Not Pasting, but you get the point):

Enter code here...

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"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"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="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:

// Related Google + Group Post:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
if (request.message) {
var i = 0;
var printAds = document.getElementsByClassName("ad-image printadviewable pointer");
for (; i < printAds.length; i++){
console.log("Current Ad ID = ");
}
}
})



PhistucK

unread,
Apr 11, 2018, 2:21:38 AM4/11/18
to webscra...@gmail.com, Chromium-Extensions-Announce
I am not sure I understand - is it working, or not? At first you write you are having trouble and then you ask for a way to simplify...
What do your console logs show?
If you log arrayOfTabs, what does it show when you expand all of its items and properties in the console?


☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/8e4dab5c-6a6f-498d-9f25-0f7d1bf82ff7%40chromium.org.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

webscra...@gmail.com

unread,
Apr 11, 2018, 1:14:25 PM4/11/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Hello,

The thing is, nothing is being printed to console, even to just print out the URL for the current tab's webpage just to make sure my extension is working. I mean, the popup webpage appears with the default logo and text, but its not as interactive as I want it yet.

I'm trying to access DOM specific content of the current webpage's tab with popup.js. On the specific webpage I want to use it on (aka DOM content), there are print ads available to the user, which are designated through <img> tags which have the class = "ad-image printadviewable pointer"

The utlimate goal of popup.js is to to re-display the same print ads in the popup.html webpage, but add the "ad ID" value that is associated with it. This ad id is an attribute found within the DOM content, aka <img> tag that is called "data-adid"

If anything, the major issue I'm having is how to correctly access DOM content on the current webpage tab.




☆PhistucK

To post to this group, send email to chromium-...@chromium.org.

PhistucK

unread,
Apr 11, 2018, 1:51:10 PM4/11/18
to webscra...@gmail.com, Chromium-Extensions-Announce
1. Your popup.js listens to chrome.extension.onRequest (which is old, why not chrome.runtime.onMessage? And chrome.runtime.sendMessage for sending a message), but nothing seems to send a request, so I am not sure what you expect to see in your popup.

2. Your background.js queries the tabs every time it is loaded, but what would make it load post-browser-startup? Listening to certain events (like onMessage) could make it load, for example.

3. You do not have direct access to the DOM of a webpage from an extension page. You must implement a content script or use chrome.runtime.executeScript on demand from popup.js and pass the webpage content using chrome.runtime.sendMessage or something like that.



☆PhistucK



☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsubscribe...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.

Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/0f7cc913-8817-4ec7-8ca9-43b999e93f30%40chromium.org.

webscra...@gmail.com

unread,
Apr 12, 2018, 1:21:00 PM4/12/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Here's an updated version of all my current scripts.
 
I'm still pretty stuck because this is getting a bit above my head, even with the okay tutorials I found on YouTube. I have to complain because Google's actual tutorial doesn't ever get this deep into how to actually really make use of all of these methods.
 
It's either this or I'm too beginner, so bear with me, since I have no idea what I'm doing, but I really really really want to make this extension to make my life easier at work since I can only use Google Chrome.

 
I have tried the following:

background.js:

chrome.runtime.onMessage.addListener(function(){
if (request.message) {
var printAds = document.getElementsByClassName("ad-image printadviewable pointer");
for (var i = 0; i < printAds.length; i++){
console.log("Current Ad Id = " + printAds[i]);
}
}
})

manifest.json:
// Use chrome.runtime.onMessage()
// Documentation:

// Use chrome.runtime.executeScript
// Documentation:
// chrome.runtime.executeScript
// ^ Couldn't find documentation:
// Found this instead:
// chrome.runtime.executeScript
chrome.runtime.sendMessage({}, function(){
// Send DOM content:
})



 

 

PhistucK

unread,
Apr 13, 2018, 3:51:50 AM4/13/18
to webscra...@gmail.com, Chromium-Extensions-Announce
Oops, I meant, chrome.tabs.executeScript. Sorry about that.
https://developer.chrome.com/extensions/api_index has all of the extension APIs.
The documentation is confusing (it switches to Chrome applications documentation at some point and becomes less relevant, with false warnings), I agree.


☆PhistucK


 

 

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/976349c0-77f5-472a-a894-fdf66b7930f9%40chromium.org.

webscra...@gmail.com

unread,
Apr 13, 2018, 2:18:23 PM4/13/18
to Chromium-Extensions-Announce, webscra...@gmail.com
 Gotcha, thanks for leading me towards the right direction. I really appreciate it. I found a relevant tutorial for chrome.tabs.executeScript(), specifically on how to manipulate the current 

Here is my updated code:

background.js:
Enter code here...chrome.runtime.onMessage.addListener(function(){
// Pass in the current tab as "null"
chrome.tabs.executeScript(null, {
// Tutorial for chrome.tabs.executeScript()
code: "var printAds = document.getElementsByClassName('ad-image printadviewable pointer'); for (var i = 0; i < printAds.length; i++){console.log('Current Ad Id = ' + printAds[i]);}"
}
});
})

manifest.json:
// Parameters for chrome.tabs.executeScript()
// chrome.tabs.executeScript(integer tabId, object details, function callback)
// I want to pass in the first tab, and if I'm not mistaken, this is found in tab "0"
// I'm not sure 

chrome.tabs.executeScript(0, {}, function(){

webscra...@gmail.com

unread,
Apr 17, 2018, 1:00:54 PM4/17/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Bump, still kinda lost mates.

PhistucK

unread,
Apr 17, 2018, 1:11:46 PM4/17/18
to webscra...@gmail.com, Chromium-Extensions-Announce
What are you bumping? You did not ask any question (unless you expect me to look at your code comments, sorry, I am not).


☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/b0a5ba95-4e9a-45ff-a054-a739fcc81c5f%40chromium.org.

webscra...@gmail.com

unread,
Apr 18, 2018, 1:05:04 PM4/18/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Well, what am I necessarily missing in my existing scripts?


☆PhistucK

To post to this group, send email to chromium-...@chromium.org.

PhistucK

unread,
Apr 19, 2018, 3:33:00 AM4/19/18
to webscra...@gmail.com, Chromium-Extensions-Announce
What does not work?


☆PhistucK



☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsubscribe...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.

Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/b23f4552-206c-4fbb-a184-3c800867adaa%40chromium.org.

webscra...@gmail.com

unread,
Apr 20, 2018, 1:06:10 PM4/20/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Well, so far, the popup.html displays fine, but it doesn't reprint any DOM related content. Despite the confusing module specific function, chrome.tabs.executeScript(), I have what works currently in the JavaScript console within the if condition.

It should be accessing the first tab via the first parameter, aka "0". I'm not sure of what object to pass into it, but I guess that's a parameter that's needed for this function. The "call back" function looks to see if request.message is True, and if so, it then rips DOM based content.

I'm thinking I'm probably missing the second {} object parameter. What should this object be? Also, should I use chrome.storage.sync.set() and chrome.storage.sync.get() in this case?
What does not work?


☆PhistucK



☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.

PhistucK

unread,
Apr 20, 2018, 4:34:21 PM4/20/18
to webscra...@gmail.com, Chromium-Extensions-Announce
Have you read the documentation?
https://developer.chrome.com/extensions/tabs#method-executeScript
The tabId parameter is optional. If you want to operate on the active tab in the active window, simple omit this parameter.
The details object parameter should either have a code field, with the JavaScript code (as a string) that you want to execute on that tab, or file, a relative url within the extension, that you want to execute on that tab.
The callback parameter would be called once the code has run on that tab. I guess the value of the last run expression would be returned its parameter within an array.

You can use chrome.storage, or you can send messages. Sending messages is probably more appropriate, if evaluating the value and getting it in the parameter of the callback does not work.


☆PhistucK

What does not work?


☆PhistucK



☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsubscribe...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsubscribe...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.

Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/99b9af50-8b1e-4d64-8fde-eff31427d812%40chromium.org.

webscra...@gmail.com

unread,
Apr 24, 2018, 1:21:14 PM4/24/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Hello,

I read through that section of the documentation and tried to apply it my current extension. However, I repacked the extension and see nothing being logged to the console. Am I misunderstanding the relationship of background.js vs popup.js?

I tried to place Google's "window.addEventListener() listener code example in the popup.js script. 

I then revised the background.js to include the chrome.tabs.executeScript() code, and used chrome.runtime.sendMessage() to send a message that DOM content will be sent to the extension's popup.html webpage.

Here's my code:

background.js:
// chrome.tabs.executeScript():
chrome.tabs.executeScript({"code": 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); for (var i = 0; i < printAds.length; i++){console.log("Current Ad Id = " + printAds[i]);}'}, function(){
if (request.message) {
// Use chrome.runtime.sendMessage() to send DOM content:
chrome.runtime.sendMessage({greeting: "hello"}, function(response){
console.log("DOM Content Sent To Chrome Extension Webpage");
})
}
})

popup.html:

<!DOCTYPE html>
<html>
<head>
<title>MR QC Auditor View</title>
<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:

// Receive the response from background.js by adding a related listener:

// Communication with the embedding page example:

window.addEventListener("message":, function(event){
if (event.source != window){
return;
}
if (event.data.type && (event.data.type == "FROM_PAGE")){
console.log("Content script received: " + event.data.text);
port.postMessage(event.data.text);
}
}, false);



PhistucK

unread,
Apr 24, 2018, 2:10:59 PM4/24/18
to webscra...@gmail.com, Chromium-Extensions-Announce
By the way, you do not need to repack the extension at all during development, you can simply load the folder of the extension (the root folder of it, that contains manifest.json) as an unpacked extension (in chrome:extensions) and reload (in the same page) every time you change your content or background script (other things will be reloaded whenever their pages are reloaded anyway).


In popup.js, you listen to the DOM message event, but you need the Chrome extension message event - chrome.runtime.onMessage.addListener(...).


☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/041086cb-1edf-47fd-a2f0-f89a065aa514%40chromium.org.

webscra...@gmail.com

unread,
Apr 25, 2018, 1:29:51 PM4/25/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Gotcha, I looked at the documentation, still am kinda lost because its a bit high brow, but bear with me. This is my changed popup.js:


chrome.runtime.onMessage.addListener("DOM Content Received", function sendResponse(){
console.log("DOM Content Received");
});

I am still not getting anything printed to console unfortunately.

Other code for reference:
background.js:

// Current Post To Look At:

// Related Google + Group Post:

// Use chrome.runtime.onMessage()
// Documentation:

// chrome.tabs.executeScript():
chrome.tabs.executeScript({"code": 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); for (var i = 0; i < printAds.length; i++){console.log("Current Ad Id = " + printAds[i]);}'}, function(){
if (request.message) {
// Use chrome.runtime.sendMessage() to send DOM content:
chrome.runtime.sendMessage({greeting: "hello"}, function(response){
console.log("DOM Content Sent To Chrome Extension Webpage");
})
}
})


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"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action":{
"default_icon": "MRLogo16.png",
"default_popup": "popup.html"
},
"permissions": [
"storage",
"tabs",
"activeTab"
]
}

popup.html:

PhistucK

unread,
Apr 25, 2018, 1:45:01 PM4/25/18
to webscra...@gmail.com, Chromium-Extensions-Announce
The documentation to which you linked specifically mentions that this is the signature of addListener -
chrome.runtime.onMessage.addListener(function callback)

What made you think there are two parameters and that the first one is a string (standard web APIs maybe? :P Forget about those :()?


☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/1ead56b4-08c1-4850-bceb-1f9ae18599f8%40chromium.org.

webscra...@gmail.com

unread,
Apr 27, 2018, 1:13:34 PM4/27/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Gotcha, what's weird is that after time has passed and I sat with this, I kind of understand just the basic premise of what's going on. 

The background.js based "chrome.runtime.sendMessage()" method sends a message out to the Chrome Browser, and the popup.js based "chrome.runtime.onMessage.addListener()" method receives that response.

I took out the string like you suggested, and the popup.js now contains:


chrome.runtime.onMessage.addListener(function sendResponse(){
console.log("DOM Content Received");
});

However, when I load a random page, no message is found in console when I hit F12 in Google Chrome. Am I missing a parameter for the background.js to elicit just a basic response from the extension?

PhistucK

unread,
Apr 28, 2018, 12:43:39 PM4/28/18
to webscra...@gmail.com, Chromium-extensions
You background script does not make a lot of sense to me -

if (request.message) {
// Use chrome.runtime.sendMessage() to send DOM content:
chrome.runtime.sendMessage({greeting: "hello"}, function(response){
console.log("DOM Content Sent To Chrome Extension Webpage");
})
}


1. What does if (request.message) do there? request does not seem to be defined anywhere, so I expect this to throw. Did you look at the Developer Tools of the background page? Do you see any error?
2. If I am not mistaken, the second parameter of sendMessage is a callback that is only called when the receiver of the message calls the third parameter (sendResponse), but you never call it there, so this will never execute.
3. For the future, keep in mind that your chrome.tabs.executeScript code value does not evaluate anything at its final statement (it calls console.log which returns undefined), so nothing will ever be passed as a parameter to the callback.
4. You can omit the name of the function of your listener, sendResponse, by the way.


☆PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To post to this group, send email to chromium-...@chromium.org.

Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/5a9306aa-c4f4-46e9-bbb7-df296d146f70%40chromium.org.

webscra...@gmail.com

unread,
Apr 30, 2018, 1:34:51 PM4/30/18
to Chromium-Extensions-Announce, webscra...@gmail.com
I took out the name of the function, and I removed the if statement. I am still completely lost at this point on what to do, but this is the revised background.js for now:

// Current Post To Look At:

// Related Google + Group Post:

// Use chrome.runtime.onMessage()
// Documentation:

// chrome.tabs.executeScript():
chrome.tabs.executeScript({"code": 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); for (var i = 0; i < printAds.length; i++){console.log("Current Ad Id = " + printAds[i]);}'}, function(){
// Use chrome.runtime.sendMessage() to send DOM content:
chrome.runtime.sendMessage({greeting: "hello"}, function(){
// Call chrome.runtime.sendResponse()
// console.log("DOM Content Sent To Chrome Extension Webpage");
})
})


webscra...@gmail.com

unread,
May 1, 2018, 1:07:11 PM5/1/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Am I misunderstanding the process, or can you recommend a good example that re-iterates just the idea of running what normally would be totally fine in JavaScript console, as a script in an extension?

I'm frustrated, because I know this dang script works fine in console. I just want it to print the same information onto the popup.html webpage :(

PhistucK

unread,
May 1, 2018, 4:20:17 PM5/1/18
to webscra...@gmail.com, Chromium-extensions
The message passing page and the content scripts page might be good points to start exploring.

So right now, you background script sends a message to the rest of the extension pages on the startup of the extension. However, your popup page is not loaded yet (you must click on a browser/page action button for the popup to show up and load), so the message goes nowhere.
I am not sure why you even need the background script, since you can do everything from the popup.

The popup should either have a button that starts the process, or a script that runs straight away the starts the process (basically, the code of the background script, which executes code on the current tab).

Note that the console.logs that you put in the value of the code field (of executeScript) will show up in the console of the current tab (because your code value runs within it), not in the console of any of the extension pages.

☆PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To post to this group, send email to chromium-...@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/e6289737-b85f-465a-93c1-5420e6e9f01a%40chromium.org.

webscra...@gmail.com

unread,
May 2, 2018, 1:14:31 PM5/2/18
to Chromium-Extensions-Announce, webscra...@gmail.com
I looked at those two pages, but was frustrated that they have an entire stupid video on "Isolated Worlds" yet they can't even bother to do some real example videos of some of these documentation sections.

That note aside, I moved deleted the background.js file, removed it from the manifest.json file, and moved the code into popup.js as you said.

I'm still not getting anything printed to console, even within the same tab as you said. Is there a specific method I am missing?

Here's my code for the popup.js:

// Current Post To Look At:

// Related Google + Group Post:

// Use chrome.runtime.onMessage()
// Documentation:

// chrome.tabs.executeScript():
chrome.tabs.executeScript({"code": 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); for (var i = 0; i < printAds.length; i++){console.log("Current Ad Id = " + printAds[i]);}'}, function(){
// Use chrome.runtime.sendMessage() to send DOM content:
chrome.runtime.sendMessage({greeting: "hello"}, function(){
// Call chrome.runtime.sendResponse()
// console.log("DOM Content Sent To Chrome Extension Webpage");
})
})



To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.

PhistucK

unread,
May 2, 2018, 1:38:29 PM5/2/18
to webscra...@gmail.com, Chromium-extensions
I guess it simply could not find that class name, then. If I change code to 'console.log("Hey")', it shows up in the console of the current tab.
If the element for which you are looking might be in an iframe, you must add allFrames: true (as in, {code: '...', allFrames: true}).

I also evaluated a value at the end of the code, so it shows up as the parameter of the callback.


chrome.tabs.executeScript({"code": 'console.log("Hey"); "hey"', allFrames: true}, function(stuff){
        console.log(stuff) // ["Hey"]
// Use chrome.runtime.sendMessage() to send DOM content:
chrome.runtime.sendMessage({greeting: "hello"}, function(){
// Call chrome.runtime.sendResponse()
// console.log("DOM Content Sent To Chrome Extension Webpage");
})
})

☆PhistucK


To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.

To post to this group, send email to chromium-...@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/6de319ee-714e-4a87-8213-dd3ed6aff688%40chromium.org.

webscra...@gmail.com

unread,
May 3, 2018, 1:46:35 PM5/3/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Hello,

So I redid my code because I realized the easier way is to use jquery to do this same idea to pull ad id's from the website.

The following code totally works in browser, and does exactly what I want it to do. It prints the ad id's in succession in console, which I later want to literally just add to the popup.html webpage.

That being said, here is the code that works:

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


Here is my new popup.js file:

chrome.tabs.executeScript({"code": ''var printAds = document.getElementsByClassName(code: 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); ', allFrames: true}, function(stuff){
// chrome.tabs.executeScript({"code": "console.log('This is A Test')"}, function(stuff){
// Use chrome.runtime.sendMessage() to send DOM content:
chrome.runtime.sendMessage({greeting: "hello"}, function(){
// Call chrome.runtime.sendResponse()
// console.log("DOM Content Sent To Chrome Extension Webpage");
})
})

/* 

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

Here is my new popup.html, which refers to a minified .js file of jquery within the same directory:

<!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>


Is this an issue of putting jquery before or after the script itself? Otherwise, this works in the Google Chrome developer console :/

I'm very excited because it works in console, but isn't showing up on screen.

PhistucK

unread,
May 3, 2018, 2:02:58 PM5/3/18
to webscra...@gmail.com, Chromium-extensions
chrome.tabs.executeScript runs code in an isolated world of the tab (as you read).
This means you have to inject jQuery to that world (though for this purpose, it seems like a major overkill, because the vanilla/non-jQuery-based equivalent is very short) first and then execute your jQuery based code, because the jQuery that is loaded by the tab itself is not "leaked" to or loaded in the isolated world.
Also, loading it in the popup page would not load it in the isolated world of the tab, they are completely separate and unrelated.
Basically -
chrome.tabs.executeScript({file: 'jquery.js'}, function () { chrome.tabs.executeScript({code: 'your jQuery based code'}); });

Though, like I wrote, this is pretty much an overkill.

☆PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To post to this group, send email to chromium-...@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/97e85b2a-0c40-4722-ba4b-6c04355885d3%40chromium.org.

webscra...@gmail.com

unread,
May 4, 2018, 1:50:55 PM5/4/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Holy damn, this works.

My next question is how I would necessarily send this information to the popup HTML page now?

Thanks so much so far, I'm very happy so far ^_^

Here's my current popup.js:

/*
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");
})
}}); });
*/

chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function () { chrome.tabs.executeScript({code: '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"));}', allFrames: true}); });

PhistucK

unread,
May 4, 2018, 4:25:31 PM5/4/18
to webscra...@gmail.com, Chromium-extensions
If you want to "return" the values of data-adid, you can collect them in an array and put the name of the array variable at the end of your code value, right after the closing curly braces of the for.
var array = []; for (...) { array.push(...) } array;
Then I believe it will be passed as a parameter to the callback function that you can specify in chrome.tabs.executeScript(options, callback).

Beyond that, this is turning into a JavaScript support thread, which is not appropriate for this group.

☆PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To post to this group, send email to chromium-...@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/1530fe59-2f5f-4c55-90d2-ed5c67d8a936%40chromium.org.

webscra...@gmail.com

unread,
May 8, 2018, 1:40:55 PM5/8/18
to Chromium-Extensions-Announce, webscra...@gmail.com
Hello, gotcha. I updated the code to include an array called "adArray", but am wondering if I should now simply use HTML code within the script itself to make it appear on the popup.html page correct?

The goal in this case would be to create a new HTML element on the popup.html page displaying that information, correct?

Here's the updated code:

// Current Post To Look At:

// Related Google + Group Post:

// Use chrome.runtime.onMessage()
// Documentation:

// chrome.tabs.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}); });

PhistucK

unread,
May 9, 2018, 4:02:19 PM5/9/18
to webscra...@gmail.com, Chromium-extensions
You should add a callback to chrome.tabs.executeScript(..., callback) and use the array-in-array-that-is-passed-as-an-argument to build your content.
This is beyond the scope of this group, as this is not a general web development support group. stackoverflow.com is.

☆PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To post to this group, send email to chromium-...@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/e41b637e-661b-43fa-b8db-0cf31a259c36%40chromium.org.
Reply all
Reply to author
Forward
0 new messages