Safari Content Blocker doesn't work with URL - safari-content-blocker

I need to block url and make blockerList code below
[
{
"action":{
"type":"block"
},
"trigger":{
"url-filter": ".*",
"if-top-url": ["https://m.youtube.com/watch?v=-wKiNZ-u-HA", "https://webkit.org/blog/4062/targeting-domains-with-content-blockers/"]
}
}
]
For "https://webkit.org/blog/4062/targeting-domains-with-content-blockers/" everything works well and blocked.
But for example "https://m.youtube.com/watch?v=-wKiNZ-u-HA" blocker not working.
Please help resolve the issue so that all the indicated url are blocked

Related

How to block web request but stay on page that initiated navigation w/ a Chrome extension (mv3)

I am trying to make a very simple Manifest v3 chrome extension that blocks an "automatic redirect" on a website.
I like to use an overseas online merchant ("foo.com") but when you click into a product's details, it sends me to sso.foo.com to login w/ a free account. I can tap the browser stop button when the product page shows up, but before the "redirect" executes (i think its more like a JS triggered window.location) - and i can work around it that way; but i'd rather just make a chrome extension for myself that blocks this.
I tried creating a declarative_new_request that blocks requests to sso.foo.com
[{
"id" : 1,
"priority": 1,
"action" : { "type" : "block" },
"condition" : {
"urlFilter" : "sso.foo.com",
"domains" : ["foo.com"],
"resourceTypes" : ["script", "main_frame", "sub_frame"]
}
}]
...And this almost works, however the browser blocks the "end" of the request to https://sso.foo.com - so instead of "stopping" on the Product page, i see a chrome page saying "sso.foo.com" was blocked by an extension. What i want, is to block the navigation to https://soo.foo.com/* but leave me on the current page ... is this possible? Thoughts on how i can do this?
For script resource type you can try redirecting to a data URL:
"action" : { "type" : "redirect", "url": "data:," },
The main_frame and sub_frame navigation cancelling is not implemented yet.
Please star https://crbug.com/943223 to raise its importance.
The workaround
Assuming the page is using an <a> link you can declare a content script with a click listener in the capturing phase that hides this event from the page.
manifest.json:
"content_scripts": [{
"matches": ["*://*.foo.com/*"],
"js": ["content.js"],
"run_at": "document_start"
}]
content.js:
window.addEventListener('click', ev => {
const a = ev.target.closest('a');
if (a?.hostname === 'sso.foo.com') {
ev.stopPropagation();
ev.preventDefault();
}
}, true);

Chrome extension simple script not being injected

I'm trying my first steps in writing a minimal Chrome extension, and I cannot figure out why it does not execute my clientScript.js.
This is my manifest.json:
{
"name": "Sit back, relax and enjoy",
"version": "0.1",
"description": "Finds and clicks the +extra channel points button when it is available",
"permissions": [ "activeTab" ],
"content_scripts": [
{
"matches": [ "https://twitch.tv/*" ],
"js": [ "contentScript.js" ],
"run_at": "document_idle"
}
],
"manifest_version": 2
}
And this is the the script that I want executed on pages that match https://twitch.tv/*:
let intervalTimer
function sibareaen() {
const btn = document.querySelector('.tw-button.tw-button--success.tw-interactive')
if (btn) {
btn.click()
console.log('At your service - clicked the button for you!')
}
}
function toggleSibareaen(on) {
switch (on) {
case true:
intervalTimer = setInterval(sibareaen, 750)
break
case false:
clearInterval(intervalTimer)
break
default:
clearInterval(intervalTimer)
}
}
console.log('At your service - ready to click for you!')
toggleSibareaen(true)
I have both files in the same folder:
Also, I have properly "installed" the extension:
The console shows no errors related to the extension.
What am I missing?
Assuming you did reload the tab (the content scripts are injected only on initial tab load, see this for more info and a workaround), you're probably a victim of the infamous Google's decision to hide www in the address bar: if you enter the edit mode and select/copy the entire text (or simply double-click the address) you will see the site's URL is actually https://www.twitch.tv/ so your manifest.json has an incorrect URL pattern that doesn't match the real site.
Simply use a generalized pattern like "https://*.twitch.tv/*" that will match both https://www.twitch.tv/ and https://twitch.tv/ and any other subdomain(s).
P.S. as a debugging step, you can check if the content script is even injected by looking at the context selector in devtools console toolbar or in devtools -> Sources -> Content scripts panel. And if you want to restore the classic address bar behavior, see https://superuser.com/a/1498561

Chrome Extension Manifest matches not working for clicking into that url

I have the following manifest
{
"manifest_version":2,
"name": "HelloWorld",
"version": "0.1",
"content_scripts": [
{
"matches": [
"*://www.mywebsite.com/"
],
"js": ["home.js"],
"run_at": "document_start"
}
]
}
It works perfectly when I enter www.mywebsite.com through browser url bar. But when I route to the same url www.mywebsite.com through hyperlinks in another url, the script does not trigger. Why is that? I do not see this in
I just figured out a temporary method, you can do
<some_dom_object>.addEventListener("click", function() {
// do the thing you want happen.
})
on that "button element" or "anchor element" or whatever that you clicked to that website, so the code will get executed also when you "click" to the url.

Chrome extension: Content script matching URL pattern for Gmail message

For my Chrome extension, I need a matching pattern for any valid Gmail message URL. Example:
https://mail.google.com/mail/u/0/?shva=1#inbox/140acd877b64109b
What I tried in manifest.json is the following:
"content_scripts": [ {
"matches": ["*://*.mail.google.com/mail/u/0/?shva=1#inbox/*"],
"css": ["default.css"]
} ]
However, my custom stylesheet is not applied when I access a Gmail message with the URL pattern above.
Any ideas why it is not applied?
If I only use "matches": ["*://*.mail.google.com"], then it works. Yet I do not want the stylesheet to be applied to my inbox page too. Thus I am looking for a pattern to only catch single message pages.
The location fragment (#...) is always ignored in the match pattern. Last time I checked, the query string is also ignored for the "css" field.
To get the desired effect, just insert the stylesheet on "*://*.mail.google.com/*", and use a content script to detect URL changes. For example:
Fragment of manifest.json:
"content_scripts": [ {
"matches": ["*://*.mail.google.com/*"],
"css": ["default.css"],
"js": ["style-toggler.js"]
} ]
Example of default.css:
.turn-on-my-style img {
visibility: hidden;
}
If prefixing your CSS selectors takes too much efforts, I suggest to use a CSS preprocessor like LESS.
style-toggler.js:
function hashCheck() {
if (/^#inbox\/.*/.test(location.hash)) {
document.documentElement.classList.add('turn-on-my-style');
} else {
document.documentElement.classList.remove('turn-on-my-style');
}
}
window.addEventListener('hashchange', hashCheck);
hashCheck();

"Not allowed to load local resource: chrome://favicon/"

Im trying to load a url's favicon using chromes favicon url:
<img class='icon' src='chrome://favicon/yahoo.com' />
But im getting the error :
"Not allowed to load local resource: chrome://favicon/yahoo.com"
And in the manifest i have:
"permissions": [
"chrome://favicon/"
],
There isnt much available online about this topic. Any suggestions?
Problems in your code
"permissions": ["chrome://favicon/"], is an invalid pattern in manifest file
If you want to use the URL of the tab's favicon use chrome.tabs API in extension pages.
Demonstration
manifest.json
Registered background page and added necessary permissions.
{
"name": "Fav Icon",
"description": "http://stackoverflow.com/questions/14800881/not-allowed-to-load-local-resource-chrome-favicon",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
]
},
"permissions": [
"tabs",
"<all_urls>"
]
}
background.js
chrome.tabs.query({
"active": true,//fetch active tabs
"currentWindow": true,//fetch tabs in current window
"status": "complete",//fetch completely loaded windows
"windowType": "normal"//fetch normal windows
}, function (tabs) {
for (tab in tabs) {
console.log(tabs[tab].favIconUrl);// Use this URL as needed
}
});
chrome.tabs.query will work in extension pages, if you want to use in content scripts use message passing to communicate URL.
References
chrome.tabs API
Message Passing
The URL needs to include the scheme as well:
<img src="chrome://favicon/http://www.yahoo.com">
Just ran into this issue and both
"permissions": ["chrome://favicon/"] and "permissions": ["chrome://favicon/*"]
worked as expected.
Chrome version 52.0.2743.116
Well, I know it's an old post but for those who are here to find this answer, why it is showing like this is basically because chrome://favicon/ and chrome://favicon/* both should be added in your mainfest.json
"permissions": ["chrome://favicon/", "chrome://favicon/*"]
NOTICE: mainfest v3 will have API dedicated to this but for now we don't have much blogs on that and also mainfest v2 will be no longer supported after 2023.
You can now use favicon as the permission with _favicon/?pageUrl=${url}&size=32 to load icons
Here is an example
Unfurtunely it will not work as it was in manifest v2. You have to use it differently.
Method 1 (lazy)
https://www.google.com/s2/favicons?domain=https://stackoverflow.com/
Method 2 (official)
manifest.json
"permissions": [
"favicon"
],
export const favicon = (pageUrl: string, size: number = 24) => {
const url = new URL(`chrome-extension://${chrome.runtime.id}/_favicon/`);
url.searchParams.append("pageUrl", pageUrl);
url.searchParams.append("size", size.toString());
return url.href;
};
favicon("https://stackoverflow.com/");
Additionaly add loading="lazy" attribute for you image, to prevent hundreds request.

Resources