I'm novice in Google Chrome Extension development and I'm running through an issue which is causing the content script not getting executed. Below is a detailed description of the issue.
I'm working an extension to read some DOM content from a web site per say example.com I've the following files and the respective code part of it.
manifest
{
"manifest_version" : 2,
"name" : "My First Chrome App",
"description" : "My First Chrome App",
"version": "1.0",
"browser_action" : {
"default_title" : "Hello"
},
"permissions" : ["tabs"],
"background" : {
"scripts" : ["background.js"],
"persistence" : false
},
"content_scripts":[
{
"matches": [
"http://example.com/HomePage.aspx"
],
"js": ["jquery_224.js", "content_script.js"]
}]
}
background.js
My intention is to create a tab and surf to a page which is mentioned in the below script. And, it has to send a message to content_script.js
chrome.browserAction.onClicked.addListener(function(){
chrome.tabs.create({ url: "http://example.com/HomePage.aspx" }, function(tab){
chrome.runtime.sendMessage({authKey : "parse-dom"});
setTimeout(function(){
chrome.tabs.remove(tab.id);
}, 2000);
});
});.
content_script.js
Here I'm trying to read the authKey that I'm sending it from my background.js
chrome.runtime.onMessage.addListener(function(request,sender,response){
alert(request.authKey);
});
Unfortunately, I'm not getting the alert nor seeing any script errors. I have gone through the Chrome Messaging API and followed the same
Where am I going wrong?
Try with
"content_scripts":[
{
"run_at": "document_start",
More infos: https://developer.chrome.com/extensions/content_scripts
or try putting a timeout on your background sendMessage
EDIT: I've also noticed on manifest.json you have an HTTPS match while you are creating a tab with an HTTP address
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'm building a small chrome extension, that can open an page in a proxy
for example i'm opening www.mysite.com, and the clicking on my extension button, and it update the page to www.myproxy.net/q=www.mysite.com.
it's working like a charm, but i want to hide the chnage in the adress bar, so the url will remain the original site.
i made a few searches, but can't find out how to do such a thing.
can you please help me?
thanks
my manifest file
{
"name": "proxy",
"version": "1",
"browser_action": {
"default_icon" : "icon.png"
},
"permissions": ["tabs"],
"manifest_version": 2,
"background":{
"scripts": ["popup.js"]
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+B",
"windows": "Ctrl+B"
}
}
}
}
my popup.js
chrome.browserAction.onClicked.addListener(function(activeTab){
chrome.tabs.query({active: true, currentWindow: true}, function(tab) {
var newURL = "http://myproxy.net/?q=" + tab[0].url;
chrome.tabs.update(undefined, {url: newURL});
});
});
AFAIK, this is not possible via Chrome API. The fact that you couldn't find searches means it's not doable yet. Unless maybe, you can write your own implementation.
You can use history.pushState or history.replaceState to do this. Refer to this article https://developer.mozilla.org/en-US/docs/Web/API/History_API
Example:
On the page of www.myproxy.net/q=www.mysite.com, add a script
history.pushState( {} , '', '/' );
I have created an extension that uses the executescript api to inject a piece of code (shown below) that basically on window.onbeforeunload confirms they want to close the page. I have the script working, and by using the file://*/* permission, got it to inject on file URLs. However, when testing it on a flash game I downloaded, the script didn't inject. The URL was externalfile:drive-randomtext/root/SWFNAME.swf. I tried adding externalfile://*/* in the permissions but got the following error message: There were warnings when trying to install this extension: Permission 'externalfile://*/*' is unknown or URL pattern is malformed. Is there an external file permission, or another way to do this?
Manifest.json:
{
"name": "name",
"short_name": "name",
"version": "3.6",
"manifest_version": 2,
"description": "Desc",
"permissions": [
"storage",
"http://*/",
"https://*/",
"tabs",
"activeTab",
"webNavigation",
"*://*/*",
"file://*/*"
],
"page_action": {
"default_icon": "logo.png"
},
"background": {
"scripts": ["disabled.js"]
}
}
Script that gets executed:
(hotkey-binding code too long, can be found here)
Mousetrap.bind('ctrl+m', function(e) {
window.onbeforeunload = confirmExit;function confirmExit(){alert('confirm exit is being called');return'Close page?';}
alert('Enabled');
return false;
});
Mousetrap.bind('ctrl+q', function(e) {
location.reload();
return false;
});
Making a simple plugin , which executes javascript when a page is loaded , and I want to execute different javascript on different page
But the following code wasn't working as expected , no "alert" was triggered:
background.html:
<html><body>
<script>
chrome.webRequest.onCompleted.addListener(
function(details) {
alert (details.url);
},
{
urls: ["*"],
types: ["main_frame"]
},
[]
);
</script>
</body></html>
manifest.json:
{
"name": "JS",
"background_page": "background.html",
"permissions": [
"webRequest",
"*"
],
"version":"0.10"
}
Alerts and console.log made from the background page of an extension simply aren't visible on the general pages.
If you want to see them, you have to open the background page : Go to the extensions settings page (menu tools/extensions) and click the "background.html" link below the name of your extension.
In your case it may be better, during development phase, to simply add the console.log and alerts in the content scripts (i.e. not the background page). So you can read them without opening the background page.
EDIT : as requested, an extension that will simply alert the location :
main.js :
alert(document.location.href);
manifest.json :
{
"name": "Any name",
"version": "3.3",
"background_page": "background.html",
"content_scripts": [
{
"matches": ["http://*/*"],
"all_frames" : true,
"run_at" : "document_end",
"js": [
"main.js"
]
}
]
}
Yes I tested it. And yes it's as painful as it sounds. You should use console.log instead of alert during your dev.
I currently looking to build a Google Chrome Extension that fetches bookmarks from the the browser and sent them to server from synchronization perspective,but it seem to always complain me of "permission error" for the "API method" used in "background.html", even though I have set the necessary permission in "manifest.json"
Here what my manifest.json look like
{
"name" : "Sync BookMark",
"background_page": "background.html",
"version" : "1.0",
"content_script" : {
"css" : ["bookmark.css"],
"js" : ["js/jquery.js","js/bookmark.js"]
},
"browser_action" : {
"default_icon" : "images/bookmark.png",
"default_title" : "Syn Bookmark",
"default_popup" : "bookmark.html"
},
"permission" : [
"bookmarks",
"management",
"unlimitedStorage"
]
}
And Here my background.html code
chrome.bookmarks.getTree(function(bookmarks) {
printBookmarks(bookmarks);
});
function printBookmarks(bookmarks) {
bookmarks.forEach(function(bookmark) {
console.debug(bookmark.id + ' - ' + bookmark.title + ' - ' + bookmark.url);
if (bookmark.children)
printBookmark(bookmark.children);
});
}
// The above code is used from the following link
Now if try to debug the above code in the Chrome developer console
It return a error of permission of the API methods used.
Got it I just miss an 's' in permission i.e "permission" instead of "permissions"