Match a Fragment identifier in a URL

Add-ons Development
1

Hello,
I’m trying to build an extension which will detect a Fragment identifier in a URL and block it

For example if user visit “www.example.com/contact#info” it will be blocked. But the user should be able to visit “www.example.com/contact#email”. I tried various methods but none worked.

How can I accomplish above task?
Thanks in advance.

2

This can be accomplished via https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest for blocking the request and https://developer.mozilla.org/en-US/docs/Web/API/URL to parse the fragments.

3

I’m not sure about this, but since the fragment identifier is not sent to the server, I would’t be surprised if it wasn’t available in the webRequest handlers either.
The fragment identifier is only relevant when displaying the page, not when fetching it, so “blocking” pages based on it doesn’t really make sense. Also, it can very easily change while a page is being displayed.

One thing you could do is not display the page based on its current fragment identifier. There are several ways to achieve that, one is this:

background.js:

browser.webNavigation.onDOMContentLoaded.addListener(
	({ tabId, frameId, url, }) => browser.tabs.insertCSS(tabId, {
		frameId, code: css, runAt: 'document_start', cssOrigin: 'user',
	})
);

const css = `
	@-moz-document regexp(
		"^https?://www.example.com/contact#(frags|to|block)$"
	) {
		:root { display: none; }
	}
`;