i am creating a chrome extension
i created a diretory with
1.background.js 2.icon.png 3.icon2.png 4.manifest.json 5.myscript.js
my manifest.json code is
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [ "storage"],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["myscript.js"]
}
],
"browser_action": {
"default_icon": "icon.png"
}
}
code for myscript.js which is content script is
document.body.innerHTML=''+document.body.innerHTML+'' ;
var iframe = document.getElementById("frame1");
function addingevent(){
chrome.extension.sendMessage({change: "icon"}, function(response) {
console.log(response.resp);
});
}
iframe.onload = function(){
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
if(iframeDocument != null)
{var bb=iframeDocument.getElementById('mybutton');
if(bb != null)
{
bb.addEventListener("click",addingevent,false)
alert("Hello World");
}}
}
and the code for background.js is
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
console.log("from a content script:from the extension");
chrome.storage.local.get("icon",function(val){
if(val.icon == "icon1")
{chrome.browserAction.setIcon({"path" :"icon2.png"},function(){});
chrome.storage.local.set({"icon":"icon"},function(){});
}
else
{chrome.browserAction.setIcon({"path" :"icon.png"},function(){});
chrome.storage.local.set({"icon":"icon1"},function(){});
}
});
sendResponse({resp: "success"});
});
objective of this extension is when user click on the button which is in the frame loaded from url http://onemoredemo.appspot.com/ icon should be toggled between icon.png and icon2.png
this extension works perfectly when i load it in webpage with url http://onemoredemo.appspot.com/ there is frame created and when i click button it is changing icon but when i open url stackoverflow.com then frame is created and showing a button in it,but when i click on the button icon remains same i am expecting that icon will be changed irrespective of url why its not changing in other url??please specify the reason
There are multiple issues
Do you expect a DOM Element with id frame1 to exist on http://stackoverflow.com
document.getElementById("frame1");
What is significance of document.body.innerHTML=''+document.body.innerHTML+'';?
Related
Just started on a test chrome extension, basically I want to change the link on right click and send to clipboard, see:
background.js
var convert_buylink = function(event){
var parser = document.createElement('a');
parser.href = event.linkUrl;
parser.hostname = 'cart.local.co.nz';
parser.protocol = 'http';
var link = document.createElement('input');
//link.value = parse.href;
link.value = 'abc';
link.focus();
link.select();
document.execCommand('SelectAll');
document.execCommand("Copy")
}
chrome.contextMenus.create({title: "Copy Local BuyLink", contexts:["link"], onclick: convert_buylink});
manifest.json
{
"manifest_version": 2,
"name": "Local Buylink",
"description": "Changes buylink to local cart",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"contextMenus",
"tabs",
"clipboardWrite"
]
}
I have read about some results from google about the copy not working, all of them saying it doesn't work on content page, but according to documentation:
A background page will be generated by the extension system that includes each of the files listed in the scripts property.
You're creating the input inside a document object of the background page, which fails because the user gesture (context menu click) required for the copy command to work was performed in another document object: the web page. Also the element you create doesn't belong to document yet, it's a detached node.
Solution: create a hidden input inside the web page.
background.js:
function convert_buylink(info, tab) {
var parser = new URL(info.linkUrl);
parser.hostname = 'cart.local.co.nz';
parser.protocol = 'http';
clipboardCopy(parser.href);
}
function clipboardCopy(text) {
chrome.tabs.executeScript({code: "\
var input = document.createElement('input');\
input.value = '" + text.replace(/'/g, "\\'") + "';\
input.style.cssText = 'opacity:0; position:fixed';\
document.body.appendChild(input);\
input.focus();\
input.select();\
document.execCommand('Copy');\
input.remove();\
"});
}
manifest.json:
"permissions": [
..............
"activeTab"
],
i have a problem, i made a chrome extension and opéra, but for Firefox, it's no working at all, my extension just block a list of urls i added to my background.js.
Can someone help me with the chrome conversion to firefox?
more details:
Im trying to convert my chrome extension to fireox, my chrome extension blocks a list of urls who are inside the background.js, im really stuck with firefox, i have tried to use the chrome version of my extension under firefox, it load the icon, the infos of the manifest.json, but the background.js dont work, the urls are not blocked
here i give you first my manifest.json code:
{
"name":"blocker",
"description":"block bad urls",
"version":"1.0",
"manifest_version":2,
"permissions": [
"http://*/*",
"https://*/*",
"webRequest",
"webRequestBlocking",
"<all_urls>" ,
"unlimitedStorage"
]
,"icons":{"48":"icon.png"},
"background":{
"scripts": ["background.js"]
},
"browser_action":{
"default_popup":"popup.html",
"default_icon":"icon.png"},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["disablef12.js"]
}
]
}
and here its my background.js
var AUTHORIZED_DOMAINS= {
"www.url01.com": false,
"url01.com": false,
"www.url02.com": false,
etc..
};
function extract_domain(url) {
var matches = url.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
return matches[1];
}
chrome.webRequest.onBeforeRequest.addListener(function(details) {
var domain = extract_domain(details.url);
return { cancel: AUTHORIZED_DOMAINS[domain ]===false };
}, {urls: ["<all_urls>"]},["blocking"]);
thanks a lot again for your time and help
block urls:
full working example of how to block urls, bootstrap method:
https://github.com/Noitidart/PortableTester/tree/block-urls
download the xpi and drag it onto firefox, it blocks google and bbc.
const {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
Cu.import('resource://gre/modules/Services.jsm');
var urls_block = [ //if urls ontain any of these elements they will be blocked or redirected, your choice based on code in observer line 17
'www.google.com',
'www.bbc.com'
];
var observers = {
'http-on-modify-request': {
observe: function (aSubject, aTopic, aData) {
console.info('http-on-modify-request: aSubject = ' + aSubject + ' | aTopic = ' + aTopic + ' | aData = ' + aData);
var httpChannel = aSubject.QueryInterface(Ci.nsIHttpChannel);
var requestUrl = httpChannel.URI.spec;
for (var i=0; i<urls_block.length; i++) {
if (requestUrl.indexOf(urls_block[i]) > -1) {
//httpChannel.cancel(Cr.NS_BINDING_ABORTED); //this aborts the load
httpChannel.redirectTo(Services.io.newURI('data:text,url_blocked', null, null)); //can redirect with this line, if dont want to redirect and just block, then uncomment this line and comment out line above (line 17)
}
}
},
reg: function () {
Services.obs.addObserver(observers['http-on-modify-request'], 'http-on-modify-request', false);
},
unreg: function () {
Services.obs.removeObserver(observers['http-on-modify-request'], 'http-on-modify-request');
}
}
};
function install() {}
function uninstall() {}
function startup() {
for (var o in observers) {
observers[o].reg();
}
}
function shutdown(aData, aReason) {
if (aReason == APP_SHUTDOWN) return;
for (var o in observers) {
observers[o].unreg();
}
}
if you want an icon just add to the xpi file which is just a zip file renamed to xpi. add a file called icon.png
see this basic bootstrap template here: https://gist.github.com/Noitidart/9025999
I am trying out chrome.desktopCapture.chooseDesktopMedia in a chrome extension and I can get a desktop stream just fine.
I am using the following to turn the stream into an blob:-URL in the background script as follows:
var objectUrl = URL.createObjectURL(stream);
What I can't seem to work out is how to set this as the src attribute of a video element on the injected page.
I have tried the following, each of which do not work:
In Background.js:
var video = document.getElementById("video");
var objectUrl = URL.createObjectURL(stream);
video.src = objectUrl;
In Content.js
//objectUrl is a string received in a message from the background page by the content page
var video = document.getElementById("video");
video.src = objectUrl;
I get the following in the javascript console:
Not allowed to load local resource: blob:chrome-extension://panahgiakgfjeioddhenaabbacfmkclm/48ff3e53-ff6a-4bee-a1dd-1b8844591a91
I also get the same if I post the URL in a message all the way to the injected page. Should this work? I'd really appreciate any advice here.
In my manifest I also have
"web_accessible_resources": [ "*" ] but that was only to see if it resolved this issue (it did not).
In a content script, the DOM is shared with the page, so any DOM operations (such as setting the video src) is subject to the same-origin policy of the page, not the extension.
If you want to show the content of a tab, then you MUST pass a tab.Tab object to chrome.desktopCapture.chooseDesktopMedia. This object can be obtained in many ways, including the message passing and tabs APIs. Here is an example using the extension button:
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// NOTE: If you want to use the media stream in an iframe on an origin
// different from the top-level frame (e.g. http://example.com), set
// tab.url = 'http://example.com'; before calling chooseDesktopMedia!
// (setting tab.url only works in Chrome 40+)
chrome.desktopCapture.chooseDesktopMedia([
'screen', 'window'//, 'tab'
], tab, function(streamId) {
if (chrome.runtime.lastError) {
alert('Failed to get desktop media: ' +
chrome.runtime.lastError.message);
return;
}
// I am using inline code just to have a self-contained example.
// You can put the following code in a separate file and pass
// the stream ID to the extension via message passing if wanted.
var code = '(' + function(streamId) {
navigator.webkitGetUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: streamId
}
}
}, function onSuccess(stream) {
var url = URL.createObjectURL(stream);
var vid = document.createElement('video');
vid.src = url;
document.body.appendChild(vid);
}, function onError() {
alert('Failed to get user media.');
});
} + ')(' + JSON.stringify(streamId) + ')';
chrome.tabs.executeScript(tab.id, {
code: code
}, function() {
if (chrome.runtime.lastError) {
alert('Failed to execute script: ' +
chrome.runtime.lastError.message);
}
});
});
});
manifest.json
{
"name": "desktopCapture.chooseDesktopMedia for a tab",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Show desktop capture request"
},
"permissions": [
"desktopCapture",
"activeTab"
]
}
ObjectURLs can't be shared cross-origin. A Data URL can be shared cross-origin if it works with your video stream (I'm not sure).
I am working on a Chrome Extension which changes the Browser Action Icon to "red.png" or "green.png" (which are both saved in the same directory as all other files) when the browser app detects sound is being played from an <audio> html5 tag.
My logical thought process is: User opens page, script starts running on page which constantly (perhaps a setInterval()) checks for if the sound is running. If the sound is running, change the icon to "green.png", else, set it to "red.png".
The way I am checking if sound is being played is this:
if (audio.duration > 0 && !audio.paused)
Where audio is a variable holding the <audio> element.
Here is my code:
manifest.json file:
{
"name": "Creative Sound Dedection",
"description": "Creatively detects sound.",
"version": "1.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "red.png"
},
"content_scripts" : [
{
"matches" : [ "<all_urls>" ],
"js" : [ "myscript.js" ]
}
],
"manifest_version": 2
}
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
var playing = request.playing;
if(playing == true)
{
chrome.browserAction.setIcon({path:"green.png"});
}else{
chrome.browserAction.setIcon({path:"red.png"});
}
});
myscript.js
function isAudioPlaying(var audio)
{
if (audio !== false && audio.duration > 0 && !audio.paused)
{
return true;
}
return false;
}
function getAudio()
{
if(document.getElementById("myAudio")) return document.getElementById("myAudio");
return false;
}
//if audio is playing: tell background that audio is playing, otherwise, tell it audio is not playing
function sendInfo()
{
chrome.runtime.sendMessage({
"playing": true
});
}
document.addEventListener('DOMContentLoaded', function () {
setInterval(sendInfo, 500);
});
I'm looking for help with why this isn't working and how to correct it, I'm very new to Chrome Extensions development as well as Javascript (although not necessarily new to programming).
Also if you can think of other ways (better) to accomplish the same task please let me know.
Any input would be greatly appreciated!
UPDATE:
Furthermore, the expression playing == true will always evaluate to false, since playing is a string. So:
// Change that:
var playing = request.playing;
if (playing == true) {...
// To this:
var playing = request.playing;
if (playing == "true") {...
setInterval(sendInfo(), 500); means:
"Every 500 milliseconds, execute the value returned by sendInfo()."
Since you want to say:
"Every 500 milliseconds, execute the function named sendInfo."
chagne the above to:
setInterval(sendInfo, 500);
BTW, chrome.extension.sendRequest/onRequest are obsolete and should be replaced with chrome.runtime.sendMessage/onMessage instead.
Besides being obsolete, the former does not properly load an event page (a.k.a. non-persistent background-page) before sending the message, so this might be the cause of your problem.
I want to create an addon for chrome. When clicked it should redirect the tab with a modified URL.
I am using this in a background page in a manifest:
<script type="text/javascript" language="JavaScript">
chrome.tabs.getCurrent(function (tab) {
var tabUrl = encodeURIComponent(tab.url);
var tabTitle = encodeURIComponent(tab.title);
chrome.tabs.update(tab.id, {url: "http://xyz.com/surf/browse.php?u=" + tabUrl});
});
</script>
And this is my manifest:
{
"name": "XYZ Surf",
"version": "1.0",
"description": "just info",
"background_page": "redirect.html",
"homepage_url":"http://www.xyz.com/surf",
"browser_action": {
"default_icon": "icon.png",
"default_title": "abc."
},
"permissions": ["tabs"]
}
All I want is that when the addon button is clicked then the user must be redirected to the modified URL. (Please explain completely and please do not refer to Google codes because it's going through my head.)
(I have been looking up for all answers and did find one but not getting it.)
Instead of doing that in the background page, you should listen on the browser action event [1]:
chrome.browserAction.onClicked.addListener(function(tab) {
var tabUrl = encodeURIComponent(tab.url);
var tabTitle = encodeURIComponent(tab.title);
chrome.tabs.update(tab.id, {url: "http://xyz.com/surf/browse.php?u=" + tabUrl});
});