Develop Reference

Google Extension HostEquals for chrome.history.deleteUrl or chrome.browsingData.remove

I am working on a chrome extension project, but cannot get host equals to work so it covers everywhere the user goes past the domain. For an example so if the user went to https://www.google.com/imghp?hl=en To have the code execute again there. Is this possible to do in the background.js file? I dont think match patterns will work here. The below code executes properly if set to an exact url chrome.history.deleteUrl({ url: 'www.google.com'} but not if I try to set it to hostEquals. I dont think this function allows hostEquals. Thank you for any help.
background.js file-
'use strict';
chrome.webNavigation.onCompleted.addListener(function() {
}, {url: [{urlMatches : 'www.google.com'}]});
var callback = function () {
alert("History is clearing");
};
chrome.history.deleteUrl(
{ url: [{hostEquals: 'www.google.com'}]}
, callback);
Is there a way I can past hostEquals in as a variable? HostEquals also does not work for chrome.browsingData.remove()

Please don't invent nonexistent properties: as the documentation says deleteUrl has only url property, which is "The URL to remove", not a pattern. If you want to remove all URLs from a domain then first find them using chrome.history.search. See also demo extensions.
A better solution might be to use details.url provided to onCompleted callback as you can see in the documentation. See also the demo extensions and look for more examples yourself.
chrome.webNavigation.onCompleted.addListener(details => {
chrome.history.deleteUrl({url: details.url});
}, {url: [{hostEquals: 'www.google.com'}]});
Another problem in your code was that urlMatches is the wrong tool because it's a regular expression that can match https://foo/bar/www1google2com in irrelevant URLs.
P.S. consider using onCommitted instead of onCompleted to perform the check earlier.

Chrome extension and .click() loops using values from localStorage

I have made a Chrome extension to help using a small search engine in our company's intranet. That search engine is a very old webpage really convoluted, and it doesn't take parameters in the url. No chance that the original authors will assist:
The extension popup offers an input text box to type your query. Your
query is then saved in localStorage
There is a content script inserted in
the intranet page that reads the localStorage key and does a document.getElementById("textbox").value = "your query"; and then does
document.getElementById("textbox").click();
The expected result is that your search is performed. And that's all.
The problem is that the click gets performed unlimited times in an infinite loop, and I cannot see why it's repeating.
I would be grateful if you would be able to assist. This is my first Chrome extension and all what I have been learning about how to make them has been a great experience so far.
This is the relevant code:
The extension popup where you type your query
popup.html
<input type="search" id="cotext"><br>
<input type="button" value="Name Search" id="cobutton">
The attached js of the popup
popup.js
var csearch = document.getElementById("cotext");
var co = document.getElementById("cobutton");
co.addEventListener("click", function() {
localStorage["company"] = csearch.value;
window.open('url of intranet that has content script applied');
});
And now the background file to help with communication between parts:
background.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
sendResponse({data: localStorage[request.key]});
});
And finally the content script that is configured in the manifest to be injected on the url of that search engine.
incomingsearch.js
chrome.extension.sendRequest(
{method: "getLocalStorage", key: "company"},
function(response) {
var str = response.data;
if (document.getElementById("txtQSearch").value === "") {
document.getElementById("txtQSearch").value = str;
}
document.getElementById("btnQSearch").click();
});
So as I mentioned before, the code works... not just once (as it should) but many many times. Do I really have an infinite loop somewhere? I don't see it... For the moment I have disabled .click() and I have put .focus() instead, but it's a workaround. I would really like to use .click() here.
Thanks in advance!

The loop is probably caused by clicking the button even if it has a value. Try putting it inside your if. That said, you are overcomplicating it.
You can access the extension's data inside content scripts directly by replacing localstorage with the chrome.storage extension api. Add the "storage" (silent) permission to your manifest.json, like this:
"permissions": ["storage"]
Remove the message passing code in background.js. Then replace the popup button listener contents with:
chrome.storage.local.set({ "company": csearch.value }, function() {
chrome.tabs.create({ url: "whatever url" })
})
Replace the content script with:
chrome.storage.local.get("company", function(items) {
if(document.querySelector("#txtQSearch").value == "") {
document.querySelector("#txtQSearch").value = items.company
document.querySelector("#btnQSearch").click()
}
})
document.querySelector() performs the same function here as getElementById, but it is much more robust. It also has less capital letters, which makes it easier to type in my opinion.

Access native JSON object when JSON2 has overloaded it

I am implementing a bookmarklet which communicates with a iframe through a JSON-RPC protocol.
However some sites, such as cnn.com load JSON2 into window.JSON although the browser already has a native JSON object.
The problem is that within my iframe I would not like to follow the same bad practice, and JSON2 does not seem to be compatible with the native JSON on Mozilla Firefox and Chrome:
So when I run stringify on the native JSON and JSON2, I get the following results:
JSON.stringify({key: "value"})
JSON2
{key:"value"}
Native JSON
{"key":"value"}
(Key is wrapped in ")
The problem is that the native JSON does not like it when the " is missing in the JSON2-produced string and throws an error:
Mozilla Firefox: SyntaxError: JSON.parse: expected property name or '}'
Google Chrome: SyntaxError: Unexpected token k
To solve the problem for good, I need to make sure that I use the same JSON library to encode the string as I do for decoding it.
One way of doing it is to make sure to use JSON2 or JSON3 on both sides, but I'd like to use the native json library where possible.
So now that sites like cnn.com have overriden the native JSON library, how can I get back to it?
I could perhaps create an iframe that points to the same domain and fetch the JSON object from its contentWindow, but that would be highly inefficient.
Isn't there a better way?

not sure if i understand your problem correctly
if you place an empty iframe like this
<iframe id="testFrame" name="testFrame" src="about:blank" style="display:none;"></iframe>
then you can also call from js
testFrame.JSON.stringify(obj);
the only problem is that if you use it in https: src could be javascript:false if you need to support IE6
EDIT: I still think i don't deserve the answer being accepted, so i've come up with a modified version of your code
(function($) {
var frm;
$.getNative = function(objectName, callback) {
if (!frm) {
frm= $("<iframe>", {
src: "javascript:false",
style: "display:none;"
}).appendTo("body").load(function(){
callback(this.contentWindow[objectName]);
// $(this).remove(); <-- this is commented to cache the iframe
});
}
callback(frm[0].contentWindow[objectName]);
}
})(jQuery)
this will enable you to use $.getNative() multiple times in a document without recreating the frame each time.

So far the best solution is to use an iframe, but as Crisim Il Numenoreano has pointed out, it should be pointed to about:blank or javascript:false. This seems to work fine so far:
function getNative(objectName, callback) {
$("<iframe>", {
src: "javascript:false",
style: "display:none;"
}).appendTo("body").load(function(){
callback(this.contentWindow[objectName]);
$(this).remove();
});
}
//Use like this:
getNative("JSON", function(JSON) {
console.log(JSON.stringify({key: "value"}));
});
Note that for bookmarklets jquery must be fetched from reliable sources and protected within a local scope too.

How to overwrite a function in the web page with Chrome extension?

Suppose there is a web site has a global namespace Q = {}, and there is a function under it: Q.foo
I'd like to overwrite this function in my chrome extension, so when the web page calls Q.foo, it would do what I like.
I tried to write:
Q.foo = function(){
alert("over written");
}
with content script. But it doesn't work....
thanks.

The main problem iis that a chrome extension exists in a separated enviornment which was created so that extension developers cant screw with the existing page's javascript and vice versa.
However geeky people can do this:
document.head.innerHTML += '<script>Q.foo = function(){alert("over written");}</script>';
Basically what this does is that it appends a script tag into the dom which is then instantly eval'd in the context of the page.

Q.prototype.foo = function(){
alert("over written");
}

How do I load an external file and make sure that it runs first in JSFiddle?

I have a JsFiddle here, and added Microsoft AJAX to be loaded through external JS/resource section. How can I tell whether or not my JS code is run after the AJAX file has finished loading?
Seems that the AJAX does not load either. :(
Here is the code in the JSFiddle:
Type.registerNamespace("Tutorial.Chapter1");
Tutorial.Chapter1.Person = function(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
};
Tutorial.Chapter1.Person.prototype = {
set_firstName: function(value) {
this._firstName = value;
},
get_firstName: function() {
return this._firstName;
},
set_lastName: function(value) {
this._lastName = value;
},
get_lastName: function() {
return this._lastName;
},
_firstName: "",
_lastName: "",
displayName: function() {
alert("Hi! " + this._firstName + " " + this._lastName);
}
};
Tutorial.Chapter1.Person.registerClass("Tutorial.Chapter1.Person", null);

The External Resources tab of jsFiddle is currently somewhat tricky and unstable to use.
The resources defined here are often not correctly included into the code. There seems to be an issue with the automatic recognition of JS and CSS resources. If this happens, the external resource is simply not added to the head section of the resulting code. You can check that by reviewing the source code of the Result frame of your jsFiddle. You will find that your MS AJAX resource is simply NOT mentioned in the resulting HTML code.
The correct recognition can actually be forced by adding a dummy value to the resource's URL like this (see –>jsFiddle docs for more info):
...&dummy=.js
Here is an example that shows how to add the external Google Maps API resource to a jsFiddle (mind the dummy parameter at the very end!):
https://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js
Unfortunately this won't work for you as the MS AJAX URL will fail when additional parameters are appended.
A solution (and currently the safest way to load external resources) is to avoid the External Resources tab altogether and load external code manually in the first line(s) of jsFiddle's HTML window like this:
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/3.5/MicrosoftAjax.js"></script>
Here is your jsFiddle modified to use that method: http://jsfiddle.net/rEzW5/12/
It actually does not do a lot (I did not check what is wrong with the rest of your code), but at least it does not throw JavaScript errors anymore.

Open "Add Resources" section and add the url of your external script...

#Jpsy's approach no longer seems to work (see my comment under his answer).
For me, adding the resource under External Resources also didn't work. (According to the Firefox Debugger, it couldn't find the resource).
The only way I was able to get an external bit of JavaScript code (in my case jquery.backstretch.js) to work, was to use Google to find a Fiddle which used this resource (and worked), then Fork this Fiddle and copy/paste all my code into the HTML, CSS and JavaScript panels. Ugh!

#clayRay, You absolutely went thru a code surgery. Just resolved that by mentioning external source in plain html which in my case is
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Using External Resources tab didn't help a bit...