It is a simple extension that invokes Xmlhttprequest to send POST data to a form. I have also added simple message boxes at beginning/end of the js code... The code is being invoked from a background page and correct permissions have been granted in manifest.json.
However when I click on the button for this extension, nothing is happening.
Given below is the js code for the extension-
alert("Beginning of code block");
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","http://taurusarticlesubmitter.appspot.com/sampleform",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=Arvind&description=Test description&email=arvind#taurusseo.com");
alert("End of code block");
Also, I added the following code to background.html--
<script>
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(
null, {file: "cdr.js"});
});
chrome.browserAction.setBadgeBackgroundColor({color:[0, 200, 0, 100]});
</script>
Finally, given below is my manifest.json--
{
"name": "My Second Extension",
"version": "1.0",
"background_page": "background.html",
"description": "The second extension that I made.",
"browser_action": {
"name": "Data in iframe",
"default_icon": "icon.png"
},
"permissions": [ "tabs",
"bookmarks",
"http://*/*",
"https://*/*",
"unlimitedStorage"
]
}
I assume that your first code block is cdr.js? Then you are not running it from the background page. Instead your background page loads a content script that tries to send a request. Content scripts run with the privileges of the page that they have been injected into. So if that page doesn't have privileges to send a request to taurusarticlesubmitter.appspot.com then the content script won't have the necessary privileges either.
If your content script needs to perform a privileged action (like sending a request to a third-party page) it should send a message to the background page and the background page will have to do it.
Related
Currently my extension opens a web page at
chrome-extension://bpmcncockdffdifceihffkimpfbobjhn/dist/webpage.html
How do I make it so that the webpage.html is omitted, and that the following url:
chrome-extension://bpmcncockdffdifceihffkimpfbobjhn
Immediately points to the webpage?
Chrome extensions pages are treated as direct file URLs, not as server pages, so there is no default handler for directories like index.html.
Persistent background script
If your background script doesn't have "persistent": false in manifest.json you can use webRequest API to redirect such a fake URL into the real one:
manifest.json:
"permissions": ["webRequest"],
"background": {
"persistent": true,
"scripts": ["background.js"]
}
background.js:
chrome.webRequest.onBeforeRequest.addListener(e => {
return {redirectUrl: chrome.runtime.getURL('/dist/webpage.html')};
}, {
urls: [chrome.runtime.getURL('/')],
types: ['main_frame'],
}, ['blocking']);
Event page background script
If your background script has "persistent": false in manifest.json you can use webNavigation API to redirect an error page to the real page. The only nuisance is that there'll be a dummy item in the tab's history and the history back button will be active (but it won't work of course as it'll be redirected again).
manifest.json:
"permissions": ["webNavigation"],
"background": {
"persistent": false,
"scripts": ["background.js"]
}
background.js:
chrome.webNavigation.onErrorOccurred.addListener(({tabId}) => {
chrome.tabs.update(tabId, {url: '/dist/webpage.html'});
}, {
url: [{
urlEquals: chrome.runtime.getURL('/'),
}],
});
There is also declarativeWebRequest but only in Chrome beta/dev/Canary. And just for fun, it's possible to use webRequest API with nonpersistent event pages but it's hacky (you'll have to prevent unloading of the event page by opening a message connection from an iframe inside the background page) and defeats the purpose of event pages so I won't be showing it here.
I'm pretty new at chrome extensions and am trying to make a simple one that automatically launches links in my emails. I am going to modify it a bit later on, but for now, this is all I am trying to do. How do I have a chrome extension automatically read the text of the current tab that I am on, or when I open emails if I can get that specific? I have a manifest file set up and currently can make the extension button launch a link, but I'd rather have this happen automatically, as I don't want to hit a button to launch a link when I could just click the link itself.
manifest.json
{
"manifest_version": 2,
"name": "MT task launcher",
"description": "This extension launches Task Links in emails",
"version": "1.0",
"background": {
"scripts": ["task.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Email Task Launcher"
},
"permissions": [
"activeTab"
]
}
task.js
chrome.browserAction.onClicked.addListener(function(tab) {
var action_url = "http://www.reddit.com";
chrome.tabs.create({ url: action_url });
});
Take a look at Official Guide, for your purpose, I think you should use content scripts ( which are injected into current web page), then read the DOM and get all the links. To open the links, you can either call window.open() or by passing message then open them via chrome.tabs.create
There are two options to do that, it's either edit the local copy of the extension or to inject the call to the extension.
Inject code as a Content script, use the matching rules as defines in the manifest file
A background page file use the 'chrome.tabs.onUpdated' event. Also, use the 'chrome.tabs.executeScript' method to inject script.
I'm completely new to Chrome Extensions. I want the creation of a bookmark to trigger a xmlhttprequest. Right now, I'm just trying to get a new bookmark event to do a console.log and can't see what I'm missing.
Here is my manifest.json:
{
"manifest_version": 2,
"name": "Booky Desktop Integration",
"description": "Sends New Chrome Bookmarks To Your Booky Desktop.",
"version": "1.0",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"bookmarks",
"http://bookydesktop.com/"
]
}
Here is my js:
chrome.bookmarks.onCreated.addListener(function(id, bookmark) {
console.log("bookmark created");
});
What am I missing?
Your code works perfectly as written. You're probably not viewing the console for your background page. You need to:
Open chrome://extensions/ (or click "Extensions" in Chrome's "Settings" menu)
Ensure "Developer mode" is ticked in the top right
Open the console by clicking "_generated_background_page.html (Inactive)" in the "Inspect views" list under your extension
Each page in Chrome has its own console instance. You were looking at the consoles of ordinary web pages, instead of looking at the console for your background page.
I am trying to download a url by writing code for chrome extension. Here is the myscript.js file:
chrome.downloads.download(
{url: 'http://www.iana.org/_img/iana-logo-pageheader.png',
saveAs: true
},
function(res){alert(res);});
and here is my manifest.json
{
"name": "My extension",
"version": "1.0",
"manifest_version":2,
"background_page": "background.html",
"browser_action": {
"name": "Manipulate DOM",
"icons": ["icon.png"],
"default_icon": "icon.png"
},
"permissions": ["downloads",
"tabs", "http://*/*","https://*/*"
],
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*"],
"js": ["jquery.js","d3.v2.js","myscript.js"],
"run_at": "document_end"
}
]
}
but the console is showing the error "Cannot call method 'download' of undefined".
Please help me.
The documentation for chrome.downloads clearly states that the "API is still under development. It is only available for Chrome users on the dev early release channel." (emphasis mine, currently at Chrome 23).
To use the API, you need to get a dev or canary build of Chrome (see this page for download links).
Another way to solve the problem is by not using the chrome.downloads API. I've been using the following method to create downloads, and it works like a charm (it works anywhere: Content script / background page / popup / whatever):
var a = document.createElement('a');
a.href = 'http://www.iana.org/_img/iana-logo-pageheader.png';
a.download = 'iana-logo-pageheader.png'; // Filename
a.click(); // Trigger download
a.click() causes Chrome to follow the link.
The download attribute causes Chrome to download the target, and suggest the attribute's value as a file name in the Save As dialog.
This feature is not limited to Chrome extensions, you can also use it in an ordinary web page. Have a look at this demo: http://jsfiddle.net/dEeHF/.
Building my first Chrome app and was wondering how to run myscript.js only when icon.png is clicked. Now it just runs whenever a page loads.
Here is my manifest.json file:
{
"name": "My extension",
"version": "1.0",
"background_page": "background.html",
"permissions": [
"tabs", "http://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["myscript.js"],
"run_at": "document_end"
}
],
"browser_action": {
"default_icon": "icon.png"
}
}
If you don't need the content script any other time except when the button is pressed, see the Chrome docs on programmatic injection to use executeScript to inject scripts on the fly.
You'll want to look into message passing. Basically the set up is:
Make another content script that listens for instructions
When the popup is clicked, fire instructions off to the content script
Content script does what it needs to do, passes back something that says it's done
Popup knows the work has been done
This is done so content scripts and background scripts' (or popups) are isolated and secure.