I'm trying to capture the current visible tab but I'm receiving undefined.
The following code is executing when the extension's icon is pressed. When the alert is called I see undefined instead of an URL.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.getCurrent(function (win) {
chrome.tabs.captureVisibleTab(win.id,{"format":"png"}, function(imgUrl) {
alert(imgUrl);
});
});
});
What should I do to get the URL of the captured image?
Can someone please help me out with this.
Thanks!
I guess your code is taken from the example given on the Chrome Extension Website and yes, it's buggy.
Change the permission attribute inside the manifest.json to this:
"permissions": [
"tabs"
,"<all_urls>"
]
Cheers,
David
I tried your code and it did not return undefined for me. The following is the code.
Manifest.json
{
"name": "Test",
"version": "1.0",
"background_page": "background.html",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs"
]
}
Background.html
<html>
<head>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.getCurrent(function (win) {
chrome.tabs.captureVisibleTab(win.id,{"format":"png"}, function(imgUrl) {
alert(imgUrl);
});
});
});
</script>
</head>
</html>
Related
Can you tell me why the following code is not working. Here is my code :
Popup.js (not a backgorund script) :
chrome.tabs.create({url: url}, function(tab) {
chrome.tabs.executeScript(tab.id, {file: 'connect.js', allFrames:true}, function() {
chrome.tabs.sendMessage(tab.id, 'whatever value; String, object, whatever');
});
});
content script :
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
console.log(message);
// Handle message.
// In this example, message === 'whatever value; String, object, whatever'
});
And my manifest :
{
"name": "AN App",
"version": "1.0",
"description": "To connect",
"permissions": [
"storage",
"activeTab",
"tabs",
"https://*/*"],
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [{
"matches": ["https://*/*"],
"js": ["connect.js"]
}],
/*
"background": {
"scripts": ["background.js"]
},*/
"manifest_version": 2
}
I don't understand, the console debug in the tab do not display anything...
I also try from the popup to the background and then from the background to the tab but nothing happen neither (I'm quite new at chrome extension so I hope u can help me)
Thanks,
Regards
Martin
I found the solution. When I call chrome.tabs.create from the JS inside the popup it closes the code running in the popup and the message is never sent.
So instead of calling the chrome.tabs.create inside the JS linked to the popup, I just send a message to the background script, the background script call chrome.tabs.create (like this it runs in background and the code do not stop from executing).
And then the message function works correctly like chrome doc says.
Martin
I am new to Google Chrome Extensions. I have created a button in my extension. With that button I want to redirect the user to another site (like "www.example.com").
I have the following code which I wrote for the redirection, but it doesn't work.
Related question.
manifest.json
{
"name": "Popup ",
"manifest_version": 2,
"version": "0.1",
"description": "Run process on page activated by click in extension popup",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
popup.html
<html>
<head>
<script src="popup.js"></script>
<style type="text/css" media="screen">
body { min-width:250px; text-align: center; }
#click-me { font-size: 15px; }
</style>
</head>
<body>
<button id='click-me'>Click Me!</button>
</body>
</html>
background.js
chrome.extension.onRequest.addListener(function(request, sender) {
chrome.tabs.update(sender.tab.id, {url: request.redirect});
});
popup.js
function clickHandler(e) {
chrome.extension.sendRequest({redirect: "https://www.google.co.in"});
alert("url");
this.close();
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('click-me').addEventListener('click', clickHandler);
})
Do you have any idea why it doesn't work?
If you use background pages, then you need to declare the background script (background.js in your case) in the manifest file:
"background": {
"scripts": [ "background.js" ]
},
Your example will not work though, because sender.tab is only defined if the request came from a tab or content script, not from the popup.
In your example, there is no need for a background page at all, you can just use the chrome.tabs API directly from the popup page:
function clickHandler(e) {
chrome.tabs.update({url: "https://example.com"});
window.close(); // Note: window.close(), not this.close()
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('click-me').addEventListener('click', clickHandler);
});
I want to make a simple extension, which is passing a variable from background to popup. The problem is, I get 'undefined' response.
Manifest:
{
"name": "Get var",
"description": "get var",
"version": "2.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {
"default_title": "Get that variable",
"default_popup": "popup.html"
},
"manifest_version": 2
}
background.js
var myURL = 'aaa';
popup.html
<!doctype html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
document.addEventListener('DOMContentLoaded', function () {
var bg = chrome.extension.getBackgroundPage();
var myURL = bg.myURL;
alert(myURL)
});
Your code (exactly as you posted it in your question) is correct and should work fine. (In fact when I created a sample extension using the code you provided, it did work as expected.)
You either accidentaly changed something when copying-pasting the actual code or there is something else messing things up (something you left out of your post).
BTW, I would suggest looking into event-pages (i.e. non-persistent background-pages) which are more resource-friendly. Keep in mind, that moving to an event-page would require some changes in order for the code to work:
document.addEventListener('DOMContentLoaded', function () {
chrome.runtime.getBackgroundPage(function (bg) {
var myUrl = bg.myUrl;
alert(myUrl);
});
});
Note: I do not in any way imply that the reason you receive undefined is that you use a persistent background-page. The code you posted should work fine with a persistent background-page - it is just better practice to use an event page (whenever possible).
I ran across a similar issue; my problem was that I didn't reload the extension after changing the manifest.
I would guess that the OP's issue was the same.
Finally I found the problem, I read background pages need background permission to work (chrome extension permissions documentation here). So I changed manifest like this:
{
"name": "Get var",
"description": "get var",
"version": "2.0",
"permissions": [
"activeTab,background"
],
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {
"default_title": "Get that variable",
"default_popup": "popup.html"
},
"manifest_version": 2
}
I created an extension for Google Chrome with this background script background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {code:"document.body.style.background='red !important';"}); // doesn't work
chrome.tabs.executeScript(tab.id, {code:"alert('hello');"}); // runs alert
});
I want to run document.body.style.background='red !important'; in the context of the web page.
How can I do it?
manifest.json:
{
"name": "Test",
"version": "1.0",
"manifest_version": 2,
"description": "Test",
"browser_action": { "default_icon": "icon.png" },
"background": { "scripts": ["background.js"] },
"permissions": ["tabs", "*://*/*"]
}
Plain and straight. Add https://*/* to permissions.
background actually expects everything, if you want to change the color use backgroundColor and need not give !important as you are injecting after everything is loaded.
So the below change may work. Please try that.
chrome.tabs.executeScript(tab.id, {code:"document.body.style.backgroundColor='red';"});
I am creating a Google Chrome extension and want to populate a form field on a page.
I am trying something like this with no effect:
chrome.tabs.executeScript(null,
{code:"document.body.form[0].email_field='" + email + "'"});
}
You should make sure you have the "tabs" permission in your manifest.json:
{
"name": "123 Testing",
"version": "0.1",
"description": ":-)",
"browser_action": {
//"default_icon": "my_icon.png",
"default_title": "Click to fill the form"
},
"background_page": "background.html",
"permissions": [
"tabs",
"http://*/"
]
}
I believe you should access forms with document.forms and not document.body.form.
See my background.html file, and test it with google.com:
<html>
<head>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {
code: "document.forms[0]['q'].value='Hello World!'"
})
});
</script>
</head>
<body></body>
</html>
(I would have usually used document.getElementById).
Good luck!