The Chrome Extension is unable to recognize a portion of the URL following the # symbol in the contentscript.js code

I am currently developing an extension for a specific website that I don't have ownership of. The URLs on this site only change after a /#/.

For instance, starting from the URL

.../#/PF/charts/patients/419d3081-5e20-4347-a852-52b2c333ce85/summary

When clicking the "timeline" link, it takes you to the next URL:

.../#/PF/charts/patients/419d3081-5e20-4347-a852-52b2c333ce85/timeline/encounter

My issue arises when trying to identify which URL to trigger my content script on. It seems that everything after the # symbol is ignored, causing the script to mistake these pages as the same. Furthermore, despite clicking links and visibly seeing page changes, the console does not register any new page loads, even though the URLs after the /#/ portion are different.

I'm looking for advice on how I can ensure my contentscript.js runs only where necessary if the typical methods (such as setting "content_scripts" in the manifest) won't suffice. Alternatively, is there a way to make the URL after the /#/ visible in some manner?

I would greatly appreciate any cost-effective solutions!

javascriptgoogle-chromeurlgoogle-chrome-extension

Answer №1

From my understanding, the anchor section of a URL, also referred to as the location fragment, is usually disregarded in the context of Chrome extension match patterns.

However, a workaround exists where you can target a specific domain and utilize document.location.hash to pinpoint the location anchor. Subsequently, you can execute the desired function within your contentscript.js only when it matches the correct page. Here's an example:

if (("onhashchange" in window){
    window.onhashchange = function () {
        if(document.location.hash == '#/PF/charts/patients/419d3081-5e20-4347-a852-52b2c333ce85/summary'){
            //perform summary actions
        }
    }
}

Essentially, your contentscript.js will run once per page (assuming all changes are on the same page). Therefore, you must monitor hash changes using the onhashchange event to properly rerun the script as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js program closes immediately upon Java startup

I am building a Discord bot that features a Java FXML interface and utilizes a Node.js program to function as an Audio playing bot. However, I am encountering an issue where the process for Node.js closes immediately when opened in Java. The problem arise ...

javascriptjavanode.jsdiscord

Creating a bot that will only respond once when a user sends multiple photos simultaneously

I'm currently working on a Telegram bot using nodejs. I am utilizing the node-telegram-bot-api library and have implemented the on('photo') method to handle when a user sends a photo to my bot. However, I am facing an issue where if a user ...

javascriptnode.jsnpmtelegram-botnode-telegram-bot-api

Replace old content with new content by removing or hiding the outdated information

I need to update the displayed content when a new link is clicked index html file <a href="" class="content-board" > <a href="" class="content-listing" > content html file <div class="content-board"> <div class="content-lis ...

javascriptjqueryhtml

Changing colors using JavaScript: A step-by-step guide

Hey there! I'm looking to change the color code in this script from $("#Tcounter").css("color","black") which uses the color word "black", to "#317D29". Can someone help me figure out how to do this? <script type="text/javascript"> $(document). ...

javascriptjquerycss

Incorporate JavaScript strings into HTML dynamically

I am facing some challenges with single quotes while trying to append HTML with a JavaScript string. So far, I have managed to successfully append the element: $("<a class='action-button' id='pl65197buy' value='buy now'&g ...

javascriptjqueryhtml

Arranging date and time in jQuery based on AM/PM notation

I have written some JavaScript code to sort dates in ascending order (from newest to oldest). I have successfully sorted the dates, but I am having trouble sorting the time with AM or PM using a 12-hour format. I can do it in a 24-hour format, but not in ...

javascriptjqueryhtmljquery-ui

Monitor checkbox status to trigger confirmation dialog

My goal is to prevent the checkbox from changing if 'NO' is clicked in a dialog. The dialog pops up, but I can't figure out how to wait for it to close before allowing the checkbox change. I've attempted using Promises and doing everyt ...

javascriptangularangular6

I'm having trouble with my Discord app command. Every time I try to use it, I keep getting the error messages "The application did not respond" and "Dispatching MESSAGE_SEND_FAILED." How

Having a good amount of experience in JavaScript, I was optimistic about developing a Discord application as it seemed quite manageable. Eventually, I successfully integrated the bot into a server and implemented a command that is now listed in Discord&apo ...

javascriptnode.jsdiscorddiscord.js

p5.js experiencing issue: Uncaught TypeError - Unable to access property 'transpose3x3' due to null value

I have a simple website built with Flask where I am running several p5.js sketch animations, and everything is working smoothly. However, when I try to add a new sketch that utilizes WEBGL, I encounter the following error: Uncaught TypeError: Cannot read p ...

javascriptpythonhtmlflaskprocessing

Retrieving information selectively using useSWRImmutable

Having issues fetching data using useSWRImmutable. The problem arises when attempting to display the fetched data inside the UserRow component. Even though I can successfully print the data outside of the UserRow component, any console.log() statements wi ...

javascriptreactjstypescriptnext.jsswr

It appears that the crackling noise is being generated by AudioContext.decodeAudioData

I am currently in the process of developing an electron app that enables users to cut and rearrange multiple audio samples while seamlessly playing them back. The combined duration of these samples can exceed an hour, making it impossible to decode and sto ...

javascripttypescriptweb-audio-api

Has a newly created element been styled or are all values set to default since it is outside of the DOM?

First, I begin by creating an element: let link = document.createElement('a'); After my document is fully loaded and all styles and scripts are applied. The styles may look something like this: a { background-color: salmon; } Therefore, it w ...

javascriptcssdom

Encountering a npm script error while running on a Windows operating

While using webpack to build my application, I encountered the following error message in the command prompt: [email protected] dev D:\Myprograms\java script\forkify webpack --mode development The error mentioned: Insufficient num ...

javascriptnpmwebpack

Changing route parameters or query parameters does not trigger a reload of component data in React

The "home" component has links that direct to the product component when clicked. Another component always visible displays links to recently visited products. However, on a product page, these links fail to work properly. Although the URL updates and tri ...

javascriptreactjsreact-routerreact-router-v4react-router-dom

The module 'NgAutoCompleteModule' was declared unexpectedly by the 'AppModule'. To fix this issue, make sure to add a @Pipe/@Directive/@Component annotation

Currently, I am attempting to integrate an autocomplete feature into my Angular 2/4+ project. Despite trying various libraries, none of them seem to be working correctly. Each one presents me with a similar error message: Unexpected module 'NgAutoCom ...

javascriptangularnpmangular5angular2-template

Formatting code within an HTML document

I am attempting to customize a stock widget that I obtained from financialcontent.com. My current approach involves using Bootstrap for styling purposes. To incorporate the widget into a div, I found it necessary to embed the script directly within the HT ...

javascripthtmlcsstwitter-bootstrapweb

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

I have a fascinating HTML5 Canvas that showcases the movement of two identical objects to both the right and the left. Although the right side operates flawlessly, I've noticed that the left object leaves behind an intriguing trail with a hint of gree ...

javascriptjqueryhtmlcsshtml5-canvas

Unfortunately, the datepicker feature does not seem to work properly on elements that have been dynamically added through the

My code progress so far is as follows: $('body').on('change', '.dropdown', function() { $.ajax({ success: function(res) { if(res.success == true) { return elements that have the class ...

javascriptjqueryajaxdatepicker

The tooltip in chart.js stubbornly holds onto past data even after it's been

Utilizing chart.js, I have implemented a feature where a tooltip displays when a user hovers over the chart successfully. However, I encountered an issue. I added an option for users to un-check data-points, which works correctly. But now, the tooltip fun ...

javascriptjquerychartschart.jschart.js2

Using Svelte to effectively connect to a specified object within an array

Check out this code snippet: <script> let data = [ {id: 1, first: "x"}, {id: 2, second: "y"} ]; </script> <input type="text" bind:value={data.first}/> If you modify the value in the input field and ...

javascripthtmlsveltesveltekitsvelte-component