I am creating a watch.json file on glitch.com, following these instructions: https://glitch.happyfox.com/kb/article/60-can-i-change-which-files-cause-my-app-to-restart/
My goal is to NOT automatically restart the browser page after every edit in JS or CSS files. Or when it does, it should throttle to reload only after 50 seconds.
{
"install": {
"include": [
"^package\\.json$",
"^\\.env$"
]
},
"restart": {
"exclude": [
"^public/",
"^dist/",
"\\.js$",
"\\.md$",
"\\.html$",
"\\.css$"
],
"include": [
"\\watch.json"
]
},
"throttle": 50000
}
Sadly, this doesn't seem to work. Any change in JS or CSS files will immediately cause a reload. What could be wrong?
The glitch project is here: https://glitch.com/edit/#!/ml5test-two
The watch.json file refers to build/restart times for full-stack apps, not browser window refreshes. You can turn off "refresh app on changes" in the project menu in the editor. See: https://help.glitch.com/kb/article/46-can-i-turn-off-or-on-automatic-refreshing-of-the-app-preview-when-i-make-changes/
Related
I'm currently trying to make sense of Google Chrome Extension development, but I'm having issues understanding it correctly.
I'm developing an extension that hosts a list of URLs and opens them on click. This sounds like a trivial task, but it doesn't work. Probably I'm doing something blatantly wrong.
Screenshot
It's not styled, but that's step 2. Basically, I want to open a shortcut on click:
manifest.json
{
"manifest_version": 2,
"name": "Chrome Shortcuts",
"description": "This extension provides shortcuts to locations in Google Chrome",
"version": "1.0.0",
"browser_action":
{
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts":
[
{
"js": [ "popup.js" ],
"matches": [ "http://*/*", "https://*/*" ]
}
],
"permissions":
[
"tabs",
"http://*/*"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Chrome Shortcuts</title>
<script src="popup.js"></script>
</head>
<body>
<ul>
<li>Settings - Passwords</li>
</ul>
</body>
</html>
popup.js
function OpenShortcut(location)
{
chrome.tabs.create({ url: location });
}
You cannot open chrome:// URLs using standard methods. This is a privileged page and the navigation will fail.
Instead, you need to use tabs API. Specifically,
chrome.tabs.create({url: "chrome://settings/passwords"});
Add active: false if you need it to open in background without closing the popup.
I completely missed the fact you're doing it already, sorry! The issue is with trying to activate your code with href="javascript:[some code]".
This, as well as onclick="[some code]", will fail in a Chrome extension due to the Content Security Policy. Specifically, inline code is not allowed (and you cannot modify the CSP in a way that allows it).
The docs give a solution to this - assign the handler from your code, i.e.
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('link1').addEventListener('click', function() {
OpenShortcut('chrome://settings/passwords');
});
});
For this to work, add an id attribute to your links. DOMContentLoaded wrapper is required, since your popup.js is executed before your node exists in the DOM.
I'm trying to write a chrome extension that executes some code when the user is on a youtube page with a video. As far as I can tell, my code is correct, but It isn't working.
eventPage.js:
chrome.webNavigation.onCompleted.addListener(function(){
console.log("Test")
},{url: [{pathContains: "watch", hostSuffix: "youtube.com"}]});
and my manifest file
{
"manifest_version": 2,
"name": "youtubeExtension",
"description": "A chrome extension for youtube",
"version": "0.1",
"permissions": ["https://www.youtube.com/", "webNavigation"],
"background": {
"scripts": ["eventPage.js"],
"persistant": false
}
}
It seems onCompleted doesn't work on youtube.
Instead of using webNavigation you can also use
Add this to your background.js
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
if (tab.url.indexOf("youtube.com") != -1) {
alert("Youtube load complete");
injectScripts();
}
}
});
and add the following to your mainfest.json
"permissions": ["https://www.youtube.com/", "webNavigation","tabs"]
This will work just as well
chrome.webNavigation.onCompleted is only triggered when a document has finished loading. When you navigate to a different page on YouTube, the new page is not really "loaded" in a traditional way, but the page is dynamically updated, and the URL is replaced using history.pushState. To detect this kind of "navigations", use the chrome.webNavigation.onHistoryStateUpdated event in addition to the onCompleted event.
Another way to detect videos on YouTube pages is by using content scripts on YouTube and some event specific to YouTube, see this answer.
Is there a way to only make my OWN browser (Chrome) not be able to go back / forward / refresh?
This happens rather often that when Im developing and playing around in devtools (Changing HTML and CSS just to try things out) I sometimes accidentally swipe back or out of habit hit refresh. I would like to be able to disable the back or forward button via some sort of extension?
I am NOT trying to disable the button on any live-website, just for me locally. Any ideas?
If you want to prevent accidental navigations, there's no need to install any extension. Just open the console, and run the following code:
window.onbeforeunload = function() {
return 'Want to unload?';
};
With this code, you will get a confirmation prompt.
If you really want to prevent the page from unloading via an extension, use the technique described in the answers to How to cancel webRequest silently in chrome extension.
Here's a minimal demo extension that adds a button to your browser. Upon click, you cannot navigate to a different page any more. You can still close the tab without any warning, though:
// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.webRequest.onBeforeRequest.addListener(function(details) {
var scheme = /^https/.test(details.url) ? 'https' : 'http';
return { redirectUrl: scheme + '://robwu.nl/204' };
// Or (seems to work now, but future support not guaranteed):
// return { redirectUrl: 'javascript:' };
}, {
urls: ['*://*/*'],
types: ['main_frame'],
tabId: tab.id
}, ['blocking']);
});
manifest.json for this extension:
{
"name": "Never unload the current page any more!",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {
"default_title": ""
},
"permissions": [
"<all_urls>",
"webRequest",
"webRequestBlocking"
]
}
How can I create an extension for Chrome that adds an icon to the toolbar, and when you click it, it opens a new tab with some local web page (for example: f.html)?
I saw this question, but it doesn't really explains what should I add in the manifest file...
This is not true for newer chrome apps.
Newer chrome apps having manifest_version: 2
requires the tabs be opened as:
chrome.browserAction.onClicked.addListener(function(activeTab)
{
var newURL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";
chrome.tabs.create({ url: newURL });
});
Well, in the extensions docs, it states in manifest, you would need to include "tabs" as its permission. Same way they explain the hello world application:
Manifest File:
{
"name": "My Extension",
"version": "1.0",
"description": "Opens up a local webpage",
"icons": { "128": "icon_128.png" },
"background_page": "bg.html",
"browser_action": {
"default_title": "",
"default_icon": "icon_19.png"
},
"permissions": [
"tabs"
],
}
Within the background page, you listen to the mouse click event on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': chrome.extension.getURL('f.html')}, function(tab) {
// Tab opened.
});
});
As you noticed above, you will see that I used the question you saw in the other post. Note, this isn't tested, but I believe it should work.
chrome.tabs.create need the permission of "tabs".
Simply using window.open in extension without need of any permission. and the code is shorter. I suggest this solution.
window.open(url,'_blank');
So I am writing my own chrome extension and I have the following content_scripts:
"content_scripts": [{
"matches": ["*://*.youtube.com/*"],
"exclude_globs": ["*user*"],
"css": ["youtube.css"]
}]
As you can see, it runs on youtube. It should however not run on youtube.com/user/, which is why I have an exclude_globs field. However, its not working and it still runs when viewing a user's channel. Anyone got any ideas?
It is a known bug in Chrome , as a work around use insertCSS
Ex:
Following Code in background.js will do the same job as in manifest.json
//Use chrome.tabs.onUpdated.addListener(function(integer tabId, object changeInfo, Tab tab) {...}); as applicable to ensure it works on every page
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.insertCSS(null, {
code: "document.body.bgColor='red'",
"all_frames": true
});
});
OR
//Use chrome.tabs.onUpdated.addListener(function(integer tabId, object changeInfo, Tab tab) {...}); as applicable to ensure it works on every page
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.insertCSS(null, {
file: {file:"content.css"},
"all_frames": true
});
});
Ensure you have enough permissions in manifest
/* in manifest.json */
"permissions": [
"tabs", "http://*/*"
],
References
a) insertCSS
b) Programmatic Injection
Hope this helps.