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.
Related
I need a listener in my chrome extension that can listen when a web site will navigate then the extension will collect the navigated url.
What you want here is the chrome.tabs.onUpdated listener, that will fire every time a tab changes URL and loads a new page.
To do this you'll need to follow two simple steps:
Add the tabs permission to your manifest.json, so it will look like this:
{
"manifest_version": 2,
"name": "Extension name",
"description": "Your description...",
"version": "1",
"permissions": [
"<all_urls>",
"tabs"
],
"background": { "scripts": ["background.js"] }
}
Now, in your background.js you can add the listener, that will look like this:
chrome.tabs.onUpdated.addListener(function(tabID, info, tab) {
var tabURL = tab.url;
// here is the url of the tab
// now you can do whatever you want with it
});
I strongly suggest you to take a look at the other methods and objects of the tabs API, so you may find helpful the official documentation for chrome.tabs
.
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"
]
}
I do want to check the content written in Chrome omnibox and redirect to the proper page.
Still, I cannot use specific keywords because I do want to redirect things like BUG-1234 to http://bugs.example.com/BUG-1234
I do have a regexp for this (as the BUG part can have lots of values).
How can I do this?
A chrome extension can help you, with help of Omnibox.
If i understood correctly when you enter BUG-1234 and hit Enter in Omnibox, your webpage URL Should be http://bugs.example.com/BUG-1234
Demonstration
I have used keyword as
"keyword": "BUG"
BUG, you can change it as per functionality. So when you enter B+U+G in chrome Omnibox , the search provider adds a custom layer as shown here
Image 1)
and when you enter 1234 and hit Enter or Select the suggested URL Open Bug %s ? in Omnibox, as shown here
Image 2)
It opens a web page with URL as shown here, where i used http://bugs.example.com as a test URL, which can be extended further.
Image 3)
manifest.json
Registered background Page and Omnibox with Chrome Extension, and added related permissions.
{
"name": "Bug Tracker",
"description": "This integrates chrome omnibox with bug search",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
]
},
"omnibox": {
"keyword": "BUG"
},
"permissions": [
"<all_urls>"
]
}
background.js
Script for Custom Suggestions
//Set Text to show for custom suggested URL(s)
chrome.omnibox.setDefaultSuggestion({
"description": "Open Bug %s ?"
});
//Fired when Enter or a suggested Link is selected
chrome.omnibox.onInputEntered.addListener(function (bugId) {
//Use your custom URL
chrome.tabs.update({
"url": "http://bugs.example.com/BUG-" + bugId
}, function () {
console.log("Bug Page is open");
});
console.log("Input Entered is " + bugId);
});
References
Background Pages
Omnibox API
Manifest File
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');
I have created a chrome extension and managed to open the popup.html file using window.open. however I want to open it in a new tab, I've tried lots of different ways including:
<script type="text/javascript" language="JavaScript">
chrome.tabs.create('url': 'popup.html');
Am I just placing the code in the wrong place or is it the wrong code altogether?
why would you want to open the popup.html in a new tab? You should create a different page for that. Anyways, if you want to open up the popup.html, in a new tab, you would need to pass in the extension url.
http://code.google.com/chrome/extensions/extension.html#method-getURL
chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
// Tab opened.
});
Now you can use Event Pages to open popup.html in new tab when extension icon is clicked without creating a default_popup page.
manifest:
"background": {
"scripts": ["background.js"],
"persistent": false
}
js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': chrome.extension.getURL('popup.html'), 'selected': true});
});
Use chrome.tabs.create(Object properties, function callback) as described on http://code.google.com/chrome/extensions/tabs.html
The object properties could contain fields for windowId, index, url and selected. The optional callback function receives a Tab object of the newly created tab.
So the simplest example to create a new tab in the current window and get it selected would look like this:
chrome.tabs.create({'url': chrome.extension.getURL('popup.html')});
Not sure why you would like to show the popup.html in a new tab, but I find it very useful while developing/debugging my extension ... it is quite a pain that on the extension page there is "usually" only a link to the background page.
Would love to know how to open it in a new window and maybe in a kiosk mode ;-)
One complete, worked example:
Manifest.json
{
"manifest_version": 2,
"name": "HelloWorld",
"version": "0.0.1",
"description": "This is HelloWorld",
"author": "BaiJiFeiLong#gmail.com",
"browser_action": {
},
"background": {
"scripts": [
"background.js"
]
}
}
background.js
// Created by BaiJiFeiLong#gmail.com at 2022/4/13
chrome.browserAction.onClicked.addListener(async () => {
await chrome.tabs.create({url: chrome.extension.getURL("popup.html")});
})
popup.html
<!--Created by BaiJiFeiLong#gmail.com at 2022/4/13-->
<body style="min-width: 500px">
<h1>Hello World</h1>
</body>