This question already has answers here:
Chrome extension - retrieving global variable from webpage
(5 answers)
Access window variable from Content Script [duplicate]
(1 answer)
Closed 7 years ago.
I'm developing a chrome extension that will do something if it detects a specific object on the window object. For example in content.js I have
var el = document.getElementsByTagName("html");
console.log(el[0].ownerDocument.defaultView.someObj);
This logs undefined. If I run the same code within the browser console. I will see that someObj exist. I get the correct element with
var el = document.getElementsByTagName("html");
but it doesn't seem like I can get the correct window object. Any ideas?
my manifest looks like
{
"manifest_version": 2,
"name": "My Ext",
"version": "0.1",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"browser_action": {
"default_icon": "images/logo.svg"
}
}
Related
This question already has answers here:
How to migrate manifest version 2 to v3 for chrome extension?
(2 answers)
How to open the correct devtools console to see output from an extension script?
(3 answers)
Closed 17 days ago.
so basically, I have build a small game using javascript and trying to create a chrome extension. This is my first time not sure what I am doing wrong in the manifest.json.
I have got multiple folder, 3 folders for images. Not sure what is wrong here.
{
"manifest_version": 3,
"name": "DICE CAR RACE",
"version": "1.0",
"description": "CLICK THE DICE AND MOVE THE CAR",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html"
},
"permissions": [
"activeTab"
],
"web_accessible_resources": [{
"resources" : ["diceImg/dice1.jpeg",
"diceImg/dice2.jpeg",
"diceImg/dice3.jpeg",
"diceImg/dice4.jpeg",
"diceImg/dice5.jpeg",
"diceImg/dice6.jpeg",
"cars/car1.jpeg",
"cars/car2.jpeg",
"cars/car3.jpeg",
"cars/car4.jpeg",
"cars/car5.jpeg",
"cars/car6.jpeg",
"racecourse/racetrack.jpeg"],
"matches": ["<all_urls>"]}
]
}
So there is a new API, proposed as a W3C standard, but to use it you need to have this extension for now.
The extension adds an additional document key named monetization, which you can access with document.monetization. And also, the website must have a payment pointer to be able to access it.
I'm trying to access it with an extension I am developing, but I get an undefined error. Here's my manifest.json
{
"manifest_version": 2,
"name": "Test Ext",
"description": "Test Description",
"version": "1.0.0",
"browser_action": {
"default_icon": "icon.png",
"default_pop": "popup.html",
"default_title": "A popup will come here."
},
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["app.js"]
}
]
}
and in my app.js, I made a simple script to check if document.monetization is loaded.
const tid = setInterval( function () {
if (document.monetization === undefined) return;
console.log('Accessible', document.monetization);
clearInterval( tid );
}, 100 );
But it's not working. How do you manage this?
As we can see in the source code of that extension document.monetization is an expando property on a standard DOM document interface, this property is not a part of DOM, it's essentially a JavaScript object so it's not accessible directly from a content script which runs in an isolated world - all JavaScript objects/variables/expandos are isolated so the page scripts can't see the JS objects of content scripts and vice versa.
In Chrome to access such an expando property you need to run the code in page context and then use standard DOM messaging via CustomEvent to coordinate the code in page context and the content script as shown in a sibling answer in the same topic.
In Firefox you can use wrappedJSObject e.g. document.wrappedJSObject.monetization
I'm new to writing add-ons. I'm trying to get a function to run X minutes after pressing a button. I'm following this MDN reference, and comparing to this example addon, but can't see my mistake.
So far I have an example.js which looks like:
var ok = document.createElement('button');
var okText = document.createTextNode("OK");
ok.appendChild(okText);
ok.onclick = startTimer;
document.body.appendChild(ok)
function startTimer(event) {
event.preventDefault();
console.log('click!')
browser.alarms.clearAll();
browser.alarms.create("Remind", {delayInMinutes: 1});
return false;
}
browser.alarms.onAlarm.addListener(ring);
function ring(alarmInfo) {
console.log("RING!");
}
So far I get the "click" notification in the log, but the "RING!" never happens, whereas I'd expect to see it appear after 1 minute.
Some more info, as per comments:
I've written an addon and am running it by running web-ext run in the add-on's directory. The manifest.json is:
{
"manifest_version": 2,
"name": "Example",
"version": "0.1",
"description": "Example",
"icons": {
"48": "icons/example-48.png",
"96": "icons/example-96.png" },
"content_scripts": [
{
"matches": ["*://*.google.com/*"],
"js": ["example.js"],
"css": ["example.css"]
} ],
"permissions": ["alarms"],
"run_at": "document_start"
}
The browser console shows a bunch of output from the site I'm on (here google.com) and the only output from example.js is click! example.js:57:2
The problem is that content scripts don't have access to as many APIs as background scripts do (see https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts). Specifically, they can't access the alarm API.
They can, however, use setTimeout or setDelay, or send a message to a separate background script to deal with the alarms.
This question already has answers here:
Using page's angular JS in chrome extension
(3 answers)
Closed 7 years ago.
I want to get $scope value so I can change the data values in it through chrome extension.. I have used the following code to get the $scope
var $scope = angular.element(document.getElementById('name')).scope()
It work fine when I try it on Console.but when I put the code in extension it gave me this error . angular is not defined So I also added angular.js file in my chrome js file . But still i could not get the $scope and does not able to change the data . This is the code I am using `
$scope = angular.element(document.getElementById('name')).scope();
console.log($scope);
$scope.$apply(function () {
$scope.data.contact_type = 20;
$scope.data.contact_name = $('#Contactname').val();
$scope.data.contact_company = $('#contactCompany').val();
$scope.data.contact_email = $('#contactEmail').val();
$scope.data.contact_phone = $('#contactPhone').val().replace('/', '-');
$scope.data.hide_contact_email = 1;
});`
Kindly anyone help me to get the $scope and change it in the extension as well .
You need to add angular to your manifest.json
Here's is an example
{
"manifest_version": 2,
"name": "your extension",
"version": "0.1",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["angular.min.js","content.js"]
}
]
}
I've looked at some similar threads in SO but I couldn't understand the solutions.
Here is my code:
manifest.json
{
"name": "Test 5",
"version": "1.0.0",
"manifest_version": 2,
"permissions": [
"storage",
"tabs",
"http://*/*"
],
"web_accessible_resources": ["jquery-2.0.3.min.map"],
"content_scripts": [
{
"matches": [
"*://*.google.es/*"
],
"js": ["jquery.js", "content_scripts.js"],
"run_at": "document_end",
"all_frames": true
}
]
}
content_scripts.js
var doFilter = function() {
var classR = document.getElementsByClassName("rc");
console.log("2");
console.log("classR: "+classR.length );
//...etc
}
$(window).load(function() {
console.log("1");
doFilter(document.body);
});
The code is already loaded as a Chrome unpacked extension. I'm using Dev Tools in Chrome to debug it from the local files in my PC.
When having Dev Tools opened in the same tab as the web browser, I browse to "www.google.es" and I search for some keyword.
Then I'm able to see in Dev Tools console logs. The problem is that the last one shows that classR has length 0.
As you can see, there are elements by class name "rc", so it seems
document.getElementsByClassName("rc")
is actually not accessing to the loaded HTML document.
What am I missing here?
Thanks.