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"]
}
]
}
Related
Note - this question is based off of this question (although it's not necessary to read the previous question): How to set value of textarea in different HTML file?
I have the following code, which is supposed to add a value into the local storage of firefox/chrome and then change the extension's UI (the code will differ slightly based upon which browser is being used, as of now, the code is for a extension in firefox):
function createSummaryBox(summary) {
console.log("Setting textarea content to: " + summary);
const currentSummary = {
currentSummary: summary
}
browser.storage.local.set(currentSummary);
window.location.href = '../summary_page/summary_page.html';
}
However, I get the following error whenever this function is called:
ReferenceError: browser.storage is not defined
How can I fix this error? I read through the MDN documentation on this method, so I'm not sure what I'm missing.
as comments suggest, you need to declare permission.
In manifest.json add:
"permissions": [
"storage"
],
or add it to any existing permissions:
"permissions": [
"activeTab",
"storage"
],
Mozilla doc page
Chrome doc page
Storage API can be used in content scripts.
Don't get confused, it's not an issue here, as it is in another Question linked in comments as possible duplicate, which it's not.
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"
}
}
I'm trying to access some data from an iframe nested within an iframe, from developers console:
Object.keys(document.getElementById("contentBody").
contentDocument.getElementById('rawContent').
contentDocument.defaultView.window.messages)
["29c736c0ed25463c8436f4990ab6c6ec.zip",
"235819a8cf11488e83f0336603b71711.zip",
"66c9260590834d9698568c8a676ef406.zip",
"fae95e31cb424cd6ad21302217ef2cdc.zip",
"f554f712141047aa9aa24f765073e305.zip",
"e5c41819578240e0868f43ab6301aeb3.zip"]
That's what I expect back, but I've tried to get that very same info from a google chrome extension that I'm developing and for some reason I cant access messages array, this is the manifest file and contentscript.js (I've tried everything that came to my mind and searching for a few hours without success :/):
content.js
var iframeContentBody = document.getElementById('contentBody');
var innerDocContentBody = iframeContentBody.contentDocument;
var iframeRawContent = innerDocContentBody.getElementById('rawContent');
var innerDocRawContent = iframeRawContent.contentDocument; // iframeRawContent is undefined here
console.log(iframeRawContent.messages); // this prints undefined
manifest:
{
"manifest_version": 2,
"name": "Read Comments",
"description": "Read all comments from the current forum",
"version": "1.0",
"content_scripts": [{
"matches": ["*://*.forum.net/*"],
"js": ["content.js"]
}],
"browser_action": {
"default_title": "Read Comments"
},
"permissions": ["activeTab", "tabs"]
}
Gists to set everything up:
HTML Example
after downloading and placing these 3 files in the same folder, run this:
python -m SimpleHTTPServer 80 # You may need to run it with sudo
then go to localhost/test.html and you're all set, if you test the line that I posted in the console you should see [1,2,3]
Extension example
this is the extension code
Developers console:
Chrome extension with "all_frames": true
Hacky solution: Partial solution
In this gist there is a way to do it, it's hard to detect when the iframe has been loaded, and it's harded to detect when the iframe inside the another iframe has been loaded, so a setTimeout gives enough time to get it done, then adding a script element to the dom seems to bypass all security measures that chrome extensions may have and it does get the content of the attribute without any other issue, still this seems hacky and it's not what I'm trying to do, I'm looking for a clean solution or a clean way to access the dom of a nested iframe as the example code states...
Thanks, any suggestion is welcome.
This was my solution after all, between what we talk over comments and my research over docs and other threads:
Content script:
(function () {
document.addEventListener("DOMContentLoaded", function () {
contentBody = document.getElementById("contentBody");
contentBody.addEventListener("load", function () {
rawContent = contentBody.contentDocument.getElementById("rawContent");
if (rawContent) {
var s = document.createElement("script");
s.src = chrome.extension.getURL('injected.js');
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
}
});
});
})();
Injected file:
keys = Object.keys(document.getElementById("contentBody").contentDocument.getElementById("rawContent").contentDocument.defaultView.window.messages);
console.log(keys);
Manifest:
{
"manifest_version": 2,
"name": "Read Comments",
"description": "Read all comments from the current forum",
"version": "0.0.1",
"content_scripts": [{
"matches": ["*://localhost/*"],
"run_at": "document_start",
"js": ["content.js"]
}],
"browser_action": {
"default_title": "Read Comments"
},
"permissions": [
],
"web_accessible_resources": ["content.js", "injected.js"]
}
As a simple explanation the main issue was the asyc load of iframes and the moment when the extension code ran, so after listening to a lot of events and discarding the ones that doesn't have the required elements on the dom everything went fine...
For completeness, here’s a version with "all_frames":true. There are two problems to work around: (1) getting messages from the inner frame to the top and (2) getting messages from the isolated world of the webpage to the isolated world of the content script (I assume you’re wanting to do more than just write messages to the console). This solves both at once by using postMessage.
if ( window.top !== window.parent ) {
var s = document.createElement("script");
s.textContent = "postMessage(messages,'*');";
s.onload = function() {
this.parentNode.removeChild(this);
};
document.head.appendChild(s);
} else if ( window.top === window ) {
addEventListener('message',function(e) {
console.log(e.data);
});
}
I must confess I’ve not actually tested it out. You may need to try making the injected script send a message from the webpage.
Hey I'm new to javascript and chrome extension developing. I'm trying to develop a chrome extension which use browser action to count the number of tags in currently active tab of the Google Chrome browser.I can use getElementsByTagName.lenght method to calculate the number of tags and I know that I can use console API to access the DOM of a webpage. But I have no idea how to call that API from my javascript file.Do you guys know anything regarding this ?
To get access to the current page DOM you need to write a content script.
1. Specify the content script in manifest.json
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
]
If you need to inject the script sometimes use Programmatic Injection by specifying permissions field:
{
"name": "My extension",
...
"permissions": [
"activeTab"
],
...
}
2.I would prefer the latter in this case.In popup.js add the code:
function printResult(result){
//or You can print the result using innerHTML
console.log(result);
}
chrome.tabs.executeScript(null, { file: 'content.js' },function(result){
printResult(result);
});
3.In content script u have access to current page/active tab DOM.
var result=document.getElementsByTagName("input").length;
This question already has answers here:
Why is document.execCommand("paste") not working in Google Chrome?
(8 answers)
Closed 8 years ago.
I want to write some data in to clipborad from a chrome extension which I'm creating.
In the manifest file i gave permissions to both clipboardRead and clipboardWrite.
i use this function which i found here
but it doesn't work. seems that "document.execCommand('copy');" can not work.
i write all of these codes in content script.
thx
manifest:
{
"manifest_version":2,
"name":"easyCopy",
"description":"just a small toll",
"version":"1.0.0",
"permissions":[
"clipboardWrite", "http://*/*", "clipboardRead"
],
"content_scripts":[
{
"matches":["http://*/*"],
"js":["jquery-1.9.1.min.js", "main_feature.js"]
}
],
"background":{
"persistent":false,
"page":"background.html"
}
}
main_feature.js:
copyOrderId();
function copyOrderId() {
$(".order-num").click(function () {
var curOrderNum = $(this).text();
copyTextToClipboard(curOrderNum);
// chrome.extension.sendMessage({method:"copy", content:curOrderNum}, function (response) {
// clog(response);
// });
});
}
function copyTextToClipboard(text) {
var copyFrom = $('<textarea/>');
copyFrom.text(text);
$('body').append(copyFrom);
copyFrom.select();
document.execCommand('copy', true);
copyFrom.remove();
}
function clog(message) {
console.log(message);
}
the background.html is just a blank page with basic html body.
Thanks everyone, I ended up using this:
document.execCommand can not work in content script.
Instead, I send data to background page and then run the "copyTextToClipboard" function.
Notice that you must put your JavaScript into single .js file instead of mixing it with background.html.
Additionally, the textarea must have an id or class property.