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( {} , '', '/' );
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 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
I've been trying to look around the web and have had difficulties finding an answer. I've seen a couple of web extensions such as OneTab that open a local index.html page when you click the browser action button. Does anyone know how I can get my chrome extension to open an index.html page when browser action is pressed?
You should take a look at chrome.browserAction and chrome.runtime.getURL.
manifest.json
{
"name": "Your Extension Name",
"description": "Your Extension Description",
"version": "0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"title": "Your Browser Action Name"
}
}
background.js
chrome.browserAction.onClicked.addListener(function () {
chrome.tabs.create({ url: chrome.runtime.getURL("index.html") });
});
There are two ways to open your local HTML page by a browser action.
1. As a popup
manifest.json
"browser_action": {
"default_icon" : "128.png",
"default_popup" : "localPage.html",
"default_title" : "localPage title"
}
2. As a normal page in Google Chrome browser
manifest.json
"background": {
"scripts": ["background.js"]
},
background.js
chrome.browserAction.onClicked.addListener(function () {
chrome.tabs.create({ url: chrome.runtime.getURL("localpage.html") });
});
It seems there are two parts for your question
1. Respond to browserAction clicked event
chrome.browserAction.onClicked.addListener(function () {
// Your code here
});
2. Open a local html page
You can get the local page url via chrome.runtime.getURL("index.html")
Then you can use chrome.tabs.create({ url: chrome.runtime.getURL("index.html") }); to open the local html page.
So I'm in the midst of creating my first Chrome Extension (Trying)
I feel like I'm close... But I genuinely don't know what to google to get the answers I need. So I'm sorry if this is a silly question.
Essentially what I'm trying to do is on click of extension - Append HTML & CSS to body and run a jQuery function. But from the looks of it, I need to call in jQuery in the manifest? Which I think I've done and it's still not working.
My Code:
manifest.json
{
"name": "Title",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_title": "Hover Title",
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery-1.7.2.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}],
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
(function ($) {
$('body').append("Hello");
alert("Hello");
console.log("Hello");
}(jQuery));
});
Any insight into where I'm going wrong would be massively helpful!
Thank you!!
Chrome extension architecture is simple but it doesn't mean one can write code without studying it.
There are two methods of injecting content scripts:
Unconditionally on all specified urls, in which case "content_script" key is used in the manifest and the content scripts communicate with the background page via runtime.sendMessage.
Only when some event occurs like e.g. the user clicks our toolbar icon, in which case we only need the permission to access the active tab.
So in the given case we'll attach the icon click handler and inject the code afterwards:
manifest.json:
{
"name": "Title",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_title": "Icon Title",
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": ["activeTab"],
"manifest_version": 2
}
background.js (this is an event page because we didn't use "persistent": true in the manifest, so be advised that the [global] variables will be lost after a few seconds of inactivity; instead you should use chrome.storage API or HTML5 localStorage/sessionStorage/and so on):
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({file: "jquery-1.7.2.min.js"}, function(result) {
chrome.tabs.executeScript({file: "content.js"}, function(result) {
});
});
});
content.js (the code runs in a sandbox so there's no need to hide global variables using IIFE)
$('body').append("Hello");
alert("Hello");
console.log("Hello");
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';"});