Can I run small script snippets in Chrome all the time, as they were mini extensions? Without the manifest and packaging involved with a regular extension?
I basically want to "hack" Chrome to send events when I press media keys. A script like so:
sendRequest = function(action) {
return chrome.extension.sendRequest({
action: action
}, (function() {}));
};
document.addEventListener("keydown", function(e) {
if (e.keyCode === 32) {
return sendRequest("pause");
} else if (e.keyCode === 37) {
return sendRequest("previous");
} else if (e.keyCode === 39) {
return sendRequest("next");
}
});
I'm imagining this can be added via the Sources tab and some of the new magic there, but not sure.
The extensions API (chrome.extension.sendRequest) is not available to non-extensions, obviously. A real mini-extension should do the job.
Related
I built an offline first app using the appcache a while ago and wanted to convert it to using the service-worker (my clients all use the latest chrome so I don't have any browser compatibility issues).
I'm using sw-precache to generate a service-worker that caches my local assets (specifically, my html/css/fonts and also some js) and it looks like when the service-worker installs, it does successfully add all the assets to cache storage and it does successfully start (install and activate both fire and complete successfully. And I have the self.skipWaiting() at the end of the install event to start the service-worker (which it does successfully as well)).
The issue is that the "fetch" event doesn't seem to ever fire. As such, if I go offline or open a browser (while already offline) and navigate to the site, I get the Chrome offline dinosaur. When I look at the network tab, it looks like the browser is trying to hit a server to retrieve the pages. I'm not sure what I'm doing wrong and I didn't touch the fetch method that was generated by the sw-precache utility...so I'm not sure what I'm missing. Any help would be greatly appreciated. My fetch event is below:
self.addEventListener('fetch', function(event) {
if (event.request.method === 'GET') {
var urlWithoutIgnoredParameters = stripIgnoredUrlParameters(event.request.url,
IgnoreUrlParametersMatching);
var cacheName = AbsoluteUrlToCacheName[urlWithoutIgnoredParameters];
var directoryIndex = 'index.html';
if (!cacheName && directoryIndex) {
urlWithoutIgnoredParameters = addDirectoryIndex(urlWithoutIgnoredParameters, directoryIndex);
cacheName = AbsoluteUrlToCacheName[urlWithoutIgnoredParameters];
}
var navigateFallback = '';
// Ideally, this would check for event.request.mode === 'navigate', but that is not widely
// supported yet:
// https://code.google.com/p/chromium/issues/detail?id=540967
// https://bugzilla.mozilla.org/show_bug.cgi?id=1209081
if (!cacheName && navigateFallback && event.request.headers.has('accept') &&
event.request.headers.get('accept').includes('text/html') &&
/* eslint-disable quotes, comma-spacing */
isPathWhitelisted([], event.request.url)) {
/* eslint-enable quotes, comma-spacing */
var navigateFallbackUrl = new URL(navigateFallback, self.location);
cacheName = AbsoluteUrlToCacheName[navigateFallbackUrl.toString()];
}
if (cacheName) {
event.respondWith(
// Rely on the fact that each cache we manage should only have one entry, and return that.
caches.open(cacheName).then(function(cache) {
return cache.keys().then(function(keys) {
return cache.match(keys[0]).then(function(response) {
if (response) {
return response;
}
// If for some reason the response was deleted from the cache,
// raise and exception and fall back to the fetch() triggered in the catch().
throw Error('The cache ' + cacheName + ' is empty.');
});
});
}).catch(function(e) {
console.warn('Couldn\'t serve response for "%s" from cache: %O', event.request.url, e);
return fetch(event.request);
})
);
}
}
});
I'm writing a chrome extension and in some web sites chrome.tabs.onUpdated.addListener() is called twice.
It mostly happens if i click on a link and not when i type in a URL by myself.
From what i found on the web and from many questions asked on StackOverflow there was a bug on chrome but it was fixed several years ago.
Some people claim it happens if there are several iframes in the page, but in my case there are no iframes in my page.
This is my code:
var storage = chrome.storage.local;
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete' && tab.status == 'complete' && tab.url != undefined) {
storage.get('URLs', function(URLs){
for (var item in URLs)
{
if (tab.url == item)
{
return;
}
else
{
//alert ("tab load complete");
storage.set({URLs: [tab.url]});
chrome.tabs.executeScript(tab.id, {
"file": "flashblocker.js"
}, function () { // Execute your code
console.log("Script Executed .. "); // Notification on Completion
});
}
}
});
}
});
How can i make it run only once?
Thanks.
Use a variable and add a check inside the listener to check the value of this variable before executing the alert. You can do something like this:
var tabUpdated = false;
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete' && tab.status == 'complete' && tab.url != undefined) {
if (!tabUpdated) {
alert("tab load complete");
tabUpdated = true;
}
}
});
But this will fail if the content script is actually loading twice as the tabUpdated variable will again be initialized to false. In that case you can use the chrome's Storage API and store the URL for which the listener has been already invoked. Simply add a check for this, if the URL is there in storage, the alert wont be invoked, else it will invoke. You can then clear the storage at the browser start or close.
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete' && tab.status == 'complete' && tab.url != undefined) {
chrome.local.storage.get('URLs', function(URL's) {
// Iterate through this list here and match with tab.url, if the match is found, just return.
if (url is there in list) {return;}
else {
alert("tab load complete");
chrome.local.set({URLs: [tab.url]});
}
});
}
});
This is just an example of how you can achieve it. Tweak it according to your needs.
I hope this helps.
I created an HTML page that has some external links, when the user taps the external link how can I prompt the user that there is no internet connection available? Thanks.
You will probably need some JavaScript and Adobe's store api (for banners or store) or reading api (for html articles or web view in folios). The api provides the singleton object adobeDPS.deviceService which can tell you if the device is online or not. Additionally it provides a signal to indicate a change.
For each link element you register an onclick event handler that checks online state and either passes the click through or catches it and gives a message to the user.
The following code could work:
<script src="js/AdobeLibraryAPI.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", myLinkChecker.register, false);
var myLinkChecker = {
register: function(){
if (typeof(adobeDPS) !== 'object') {
console.log("Adobe Library not loaded :-(");
this.check = function() { return true } // Fallback
}
var linkList = document.querySelectorAll("a, map > area");
for (var i=0; i < linkList.length; i++){
var e = linkList[i];
if (e.hasAttribute('href'))
e.addEventListener('click', myLinkChecker.check, false);
}
},
check: function(ev){
if (adobeDPS.deviceService.isOnline) { // let <a> process the click
console.log("online");
return true
} else { // cancel click event and show message
event.stopPropagation();
event.preventDefault();
alert("Sorry, your device is not online")
return false;
}
}
}
</script>
Remote debugging html in DPS apps can be done using iOS developer apps and desktop Safari, or Android apps with Google Chrome.
I am using WebKit Notifications for my app. Say if I am using this code:
var n = window.webkitNotifications.createNotification(
'icon.png',
'New Comment',
'Praveen commented on your post!'
);
n.onclick = function(x) { window.focus(); this.cancel(); };
n.show();
PS 1: The first five lines are actually a single line. Just for readability I have posted this way.
PS 2: For the full code, please see this: Unable to show Desktop Notifications using Google Chrome.
My question is, what if I have more than one tab opened?
Say if this is gonna get fired when a new comment appears on my app. What if I have more than one tab open? Will this generate many notifications? Say, I have 10 - 15 tabs open and I get two notifications fired. How many notifications will be generated, 20 - 30?
If that is the case, how to prevent generation of a single notification multiple times for each opened tab?
You just need to specify "tag" option for notification. Notifications with the same value in tag only shows once even if many tabs are opened.
For example:
var notification = new Notification('Hey!', {
body : 'So nice to hear from you',
tag : 'greeting-notify',
icon : 'https://mysite.com/my_funny_icon.png'
});
A detailed explanation of Tagging notifications so only the last one appears is available
on the MDN docs site
An excerpt of the code [just in case the docs go down]
The HTML
<button>Notify me!</button>
The JS
window.addEventListener('load', function () {
// At first, let's check if we have permission for notification
// If not, let's ask for it
if (Notification && Notification.permission !== "granted") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', function () {
// If the user agreed to get notified
// Let's try to send ten notifications
if (Notification && Notification.permission === "granted") {
for (var i = 0; i < 10; i++) {
// Thanks to the tag, we should only see the "Hi! 9" notification
var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
}
}
// If the user hasn't told if he wants to be notified or not
// Note: because of Chrome, we are not sure the permission property
// is set, therefore it's unsafe to check for the "default" value.
else if (Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// If the user said okay
if (status === "granted") {
for (var i = 0; i < 10; i++) {
// Thanks to the tag, we should only see the "Hi! 9" notification
var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
}
}
// Otherwise, we can fallback to a regular modal alert
else {
alert("Hi!");
}
});
}
// If the user refuses to get notified
else {
// We can fallback to a regular modal alert
alert("Hi!");
}
});
});
I am developing a webpage using Wordpress 3.04, and I'm experiencing the following issue:
In this webpage, I implemented a script that changes the background image every 10 seconds or so. Now, when users press the Left Arrow and Right Arrow keys, it makes the background picture change back and forth accordingly, and messes up the rotation cycle.
This becomes a problem in the Contact Form section of the site, since users that might need to navigate left and right inside each field might end up changing the background pic instead.
I would also like to disable the "Enter" key, to avoid the form being sent if the users are not done writing their message.
I looked around and found this javascript code that didn't work:
document.onkeydown=function DisableCTRL(e)
{
var val=(document.all)?event.keyCode:event.which;
if(parseInt(val)==17)//CTRL
{
alert('Not Allowed!');
window.event.returnValue=false;
}
}
This JS code didn't work either:
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
Any help will be greatly appreciated. Thanks!
I think, you should call stop() on the passed event, i.e.
document.onkeydown = function(e) {
if (e.keyCode == 17) {
alert('Not Allowed!');
e.stop();
}
};
and maybe use addEventListener(). I am not sure, intercepting the Ctrl key down will actually turn of Ctrl altogether. I guess, you need to intercept cursor left/right with the ctrlKey attribute set. For testing key events, see e.g. http://unixpapa.com/js/testkey.html.
PS. document.all: http://javascript.about.com/od/hintsandtips/a/worst_4.htm
You need to call e.preventDefault() to stop the event from going ahead.. I wrote this function to handle unwanted keys on a site recently:
PreventIllegalKeyPress = function (e) {
if (e.target) t = e.target; //Firefox and others
else if (e.srcElement) t = e.srcElement; //IE
if (e.keyCode == 116) { //prevent F5 for refresh
e.preventDefault();
}
if (e.keyCode == 122) { //F11 leave fullscreen
e.preventDefault();
} else if (e.altKey && e.keyCode == 115) { //Alt + F4
e.preventDefault();
} else if (e.altKey && e.keyCode == 37) { //Alt + left
e.preventDefault();
} else if (e.altKey && e.keyCode == 39) { //Alt + right
e.preventDefault();
} else if (e.ctrlKey && e.keyCode == 82) { //Ctrl + R (reload)
e.preventDefault();
}
if (!(t.tagName == 'INPUT')) {
if (e.keyCode == 13) { //enter
e.preventDefault();
}
if (e.keyCode == 8) { //backspace
e.preventDefault();
}
}};
Note the check for t.tagName == "INPUT". This makes sure that both enter and backspace keys are allowed in input field but no-where else.
Then in $(document).ready, paste the following snippet to call the function:
$(document).keydown(function (e) {
NFS.PreventIllegalKeyPress(e);
});
This works perfectly fine for me.