How do I remove animated google doodle using localhost chrome extension?
Obviously I cannot comment so ....
If you have loaded jquery with content-scripts in manifest.json then this is quite easy by adding to
content.js a line:
$( "div#lga" ).replaceWith( "<h2>Freedom!</h2>" );
Related
I know that we can edit source directly in chrome,
and we can edit the extension background.js in chrome,
just like: https://www.sitepoint.com/edit-source-files-in-chrome/
but how can I edit the contentscript in chrome devtools?
I have set source->filesystem, but it does not seem to work.
I have an extension working in Chrome that uses chrome.storage.local.set and .get. I'm having trouble understanding the WebExtensions API docs in terms of how to port that storage code to Firefox.
Some of the sample code referenced from the WebExtensions API doc uses browser.storage.local.set and .get, but those lines return 'browser is not defined' when I use them in my extension running in Chrome. The WebExtensions API porting doc here suggests that chrome.storage.local.set and .get should work in Firefox and Safari, but, maybe I'm reading them incorrectly?
I have not tried chrome.storage.set and .get in a Firefox extension yet. Should they just work?
In Chrome, JavaScript APIs are accessed under the chrome namespace. In Firefox and Edge, they are accessed under the browser namespace.
from https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities
So for your case, it sounds like you have to change all chrome.whatever into browser.whatever
Well, the fact is the namespaces are different. So no, browser won't work on Chrome. I imagine you can add a line at the beginning of your background/content code, with something like:
var browser = (window.browser)? window.browser : window.chrome;
That way you can use "browser" from Chrome and Firefox extensions. But there is still a problem. Maybe you already observed that there are some few differences in the APIs, e.g. Chrome uses callbacks in some messages while Firefox uses Promises.
So, I suggest you using the webextension-polyfill library, that will allow you to use the "browser" object and Promises in any browser.
https://github.com/mozilla/webextension-polyfill
If you are using npm, you can import the production version with:
"webextension-polyfill": "^0.2.1"
After that, you should import the library before doing anything else:
"background": {
"scripts": [
"node_modules/webextension-polyfill/dist/browser-polyfill.js",
"background/your-code-goes-here.js"
]
},
"content_scripts": [{
"matches": ["*://*/*"],
"js": [
"node_modules/webextension-polyfill/dist/browser-polyfill.js",
"content/your-code-goes-here.js"
]
}
And if you are using an iframe, you should import it from there also. E.g.
<script src="../node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>
Hope it helps.
chrome.storage.set and chrome.storage.get will work in Firefox extension, but better to use storage API.
Here is example of usage: https://github.com/mdn/webextensions-examples/blob/master/navigation-stats/popup.js#L26
The difference with chrome that it's a Promised-based API.
For Safari you can look at settings API.
Also, you can always use cookies or localStorage on your BG page or content script.
I have a website that will be displayed in all browser but I need it to display an alert box on load only in Firefox.
How can I detect the browser and specify that if it is mozilla the alert should pop up?
You could include jQuery in your website and try the following code:
if ($.browser.mozilla) {
alert( "this is mozilla!" ); // popup if the browser is mozilla
}
PS: Bear in mind that all Mozilla derivates are recognised here.
I'm working on a google chrome extension which has a button and a popup-overlay. Inside this extension, I set and remove cookies for the user. During development, the extension is making requests to localhost:8080 and (I assume) cookies are being set with localhost as the domain.
The problem is, I can't figure out how to view these cookies in a list from within Chrome. Firefox has a simple feature for viewing all the cookies set by various hostnames and Chrome appears to as well (although I'm less familiar with the developer tools in Chrome). But in Chrome's cookie list, I can't find any cookies set for localhost, nor any cookies for my extension, whatsoever. I've tried a few 3rd party cookie extensions too -- no luck there either.
Will cookies set by extensions appear in the same place as cookies set by normal websites? If so, why am I not seeing them? Help appreciated. Thanks!
Yes they appear in sample place.. I have written a sample extension for demonstration; Screen shot taken after testing this for developer.chrome.com domain
Sample Extension:
manifest.json
{
"name" : "Cookie API Demo",
"version" : "1",
"description" : "This is demonstration of Cookie API",
"permissions": [ "cookies","<all_urls>"],
"browser_action": {
"default_icon": "screen.png",
"default_popup":"popup.html"
},
"manifest_version": 2
}
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
function cookieinfo(){
chrome.cookies.getAll({},function (cookie){
console.log(cookie.length);
for(i=0;i<cookie.length;i++){
console.log(JSON.stringify(cookie[i]));
}
});
chrome.cookies.getAllCookieStores(function (cookiestores){
for(i=0;i<cookiestores.length;i++){
console.log(JSON.stringify(cookiestores[i]));
}
});
chrome.cookies.set({"name":"Sample1","url":"http://developer.chrome.com/extensions/cookies.html","value":"Dummy Data"},function (cookie){
console.log(JSON.stringify(cookie));
console.log(chrome.extension.lastError);
console.log(chrome.runtime.lastError);
});
chrome.cookies.onChanged.addListener(function (changeInfo){
console.log(JSON.stringify(changeInfo));
});
}
window.onload=cookieinfo;
Well I figured it out. It's a forehead slapper, but I'll post the answer here anyway in case others need help.
The cookies for the overlay extension only show up in the "developer tools" if you inspect the overlay element. That is, if you close the overlay and click the wrench button, developer tools, resources, cookies, the only thing you'll see there are cookies for the underlying page.
In order to see cookies for an overlay extension, right-click INSIDE the overlay and "inspect element". The cookies do show up there, and the "domain" they're attached to is the extension's unique id (kackjckjckjckcjckjckcjkcjckcj or what-have-you).
Random note: At the time of this writing, the Jquery cookies plugin always kills your cookies at session, no matter what you set the expiration to. In order to get my cookies to persist (survive) beyond browser close, I had to include good old-fashioned setCookie() and getCookie() functions and get rid of Jquery cookies.
In your browser - visit:
chrome://settings/cookies
I just set it as the address for a bookmark in chrome - and then just click my bookmark when I want to see the cookies
i wonder if and how it is possible to open a website inside a panel or in an external browser window of the mobile safari! I tried to open a website inside a panel but due to crossdomain problems only the htm without the css was loaded.
any ideas?
thnx!
edit: let's say, we use phoneGap
As far as I know, cross-domain issues do block you from IFRAME solutions for displaying external links inside your app.
Best solution currently is to have links include target="_blank" to force a new browser window to open.
#Stevanicus #Dalar It does open a new window in Mobile Safari if you use Phonegap and allowed domains using phonegap.plist whitelist property, but if you do somthing like
var rateMsg = Ext.Msg.confirm('Title', 'Some message', function(e) {
if(e == 'yes')//If user confirms yes
{
window.open("http://www.example.com", "_blank");//We open a link with _blank to use mobile safari and not your webview
}
});
It does not work.