Injected code from a self-built extension may not be applied by Google Chrome on certain websites until the scroll wheel is turned

I have developed two unique Chrome extensions designed to enhance web pages with CSS and SVG filters. Here are the links to the source code:

CB Enhancer (adjusts colors for color-blind users) https://drive.google.com/open?id=1hvJIn3kPAMjaIWrAiUtIEVkEesQ1ce6W

CB Visualizer (simulates color blindness for web designers) https://drive.google.com/open?id=1_aHgNsLL2jam0pxmh7WuPSbIWBzIEjq0

Although the extensions serve different purposes, they share a similar implementation:

  • Clicking a button triggers popup.js to communicate with background.js
  • background.js then inserts or removes code (such as divs, styles, or SVG elements) based on the message received

However, I have noticed a discrepancy between CB Enhancer and CB Visualizer. While CB Enhancer instantly applies filters upon selection, CB Visualizer experiences a delay on certain websites like Facebook, requiring a scroll with the middle mouse button to activate the changes.

Both extensions alter the page's source code upon button press, but the delay is specific to CB Visualizer. If you have any insights on why this might be occurring, please share your knowledge.

Thank you!

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Answer №1

When creating a SVG element, you are adding an entire SVG string to its innerHTML property. The structure of the element will be like this:

<svg id="insertedSVG">
   <svg width="0" height="0"></svg>
</svg>

After loading your extension in Firefox, it appears that this browser can access the SVG element without the need for an <object> tag as a wrapper. More information on embedding SVG in HTML documents can be found here.

To ensure compatibility with Chrome, it is recommended to wrap the SVG elements in an <object> tag.

var insertSVG = document.createElement('object');

Result:

<object id="insertedSVG">
   <svg width="0" height="0"></svg>
</object>

Note: Remove the background persistent key from your manifest.json as it will be deprecated in manifest v3. This change is necessary for your extension to function properly in Firefox as well.

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

Discovering dependencies for the Tabulator library can be achieved by following these

Can anyone provide me with a complete list of dependencies for Tabulator 4.2? I have already reviewed the package.json file, but it only contains devDependencies. ...

javascriptangulartabulator

Choosing multiple classes in CSS 3

As I reviewed some sample code today, I noticed the developer opted to use a "+" instead of a "," to select two classes. .region + .region{ border-left: 1px solid lightgray; padding-left: 3.5%; margin-left: 4%; } I'm curious about what t ...

classcssselector

Accents marked with diacritics are not being detected + An issue occurred while

I'm currently working on putting together a Spanish dictionary by sourcing the definitions from www.rae.es. However, there are a couple of challenges I'm facing: One issue is that the search engine does not function properly with acute accent ...

phpjavascripthtmlhyperlinkhtml-parsing

FancyBox - Is there a "Never show this message again" option available?

I implemented FancyBox on my website to display important information to users. However, I would like to enhance the user experience by adding a button that allows them to set a cookie and prevent the message from popping up for about a month. Since I&apo ...

javascriptjqueryhtmlfancyboxfancybox-2

"Ascend beyond the constraints of fixed measurements with dynamic

My JQuery image fader has a width of 100% and height set to auto. I'm thrilled that it works perfectly on the iPhone as well. Now, I am facing a challenge while trying to make content "float" after my JQuery slider. The problem arises because I use ...

csscss-float

Creating a grid UI in AngularJS using Typescript: utilizing functions as column values

I am working on an AngularJS app that includes the following UI grid: this.resultGrid = { enableRowSelection: true, enableRowHeaderSelection: false, enableHorizontalScrollbar: 0, enableSorting: true, columnDefs: [ { name: &apos ...

javascriptangularjstypescript

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

javascriptjqueryhtmlcss

What is the best approach for handling nested conditional statements?

I have a complex set of nested conditional checks that I am working on refining to avoid getting stuck in a nested if{}else{} loop. To provide context, I am dealing with two objects, CACHE_FILE_AGE_LIMIT and CACHE_FILE_CURRENT_AGE, and I am trying to navig ...

javascriptif-statement

Tips for efficiently transmitting extensive strings over AJAX from JavaScript to PHP

I'm working on creating a system where users can write lengthy posts, but I'm facing an issue with transferring long strings through AJAX. I keep getting an error message saying the link is too large. To work around this, I started dividing the s ...

javascriptphpajaxstringtransfer

String validation using regular expressions

Below is the code I am using to validate a string using regular expressions (RegEx): if(!this.validate(this.form.get('Id').value)) { this.showErrorStatus('Enter valid ID'); return; } validate(id) { var patt = new RegExp("^[a-zA- ...

javascriptregexangularvalidationtypescript

Selecting a specific section from a JSON data reception

Upon executing a POST request to , the resulting response typically looks like this: { "success": true, "data": { "url": "http://i.imgflip.com/1nciey.jpg", "page_url": "https://imgflip.com/i/1nciey" } } Is there a way for me to output the s ...

javascriptjson

Ways to manage properties that are non-existent

Whenever vm8 encounters a property that doesn't exist, it will display an error message like this: Cannot read property 'value' of null. For example, when passing an id that doesn't exist: var pass = document.getElementById('pass ...

javascript

Using Node.js buffers in typed arrays

Within my node.js application, I am working with a Buffer that was stored as a blob in MySQL and retrieved using sequelize. This Buffer is composed of 16-bit integers, and in the past, I have parsed it using a for loop. var spectrum_buffer = spectrums ...

javascriptnode.js

It appears that the validation and onChange event handler in Material-UI's TextField are not functioning as anticipated

Currently, I am working with React and Material-UI's TextField component using type='number'. The default validation provided seems quite simple, allowing any character that could potentially represent part of a number [0-9\.eE-]*. This ...

javascriptreactjsmaterial-uitextfieldonchange

The internal style and script specified within the <head> section are not being rendered

Within my Joomla website using the T3 template, I inserted the following "Custom Code" just before the closing </head> tag: <style type="text/stylesheet"> div.t3-sidebar.t3-sidebar-right{ background: #F8F8F8 none repeat scroll 0% 0%; ...

javascriptcssjoomla3.0

Unexpected issue with Ionic 4 subarray returning as undefined even though the index is accurate

When attempting to use console.log to view the value, I noticed that the value of noticeSet2[index] is undefined. However, when I print noticeSet, all the data in the array is displayed. Additionally, after printing the index using console.log, it correctl ...

javascripthtmltypescriptionic-frameworkionic4

Create dynamic elements in Vue.js components based on an object

I'm currently working on a component that will display elements within VueJs virtual dom using Vuex state. However, I have encountered an error that I am unable to comprehend and resolve: Avoid using observed data object as vnode data: {"class":"b ...

javascriptvue.jsvuejs2vue-componentvirtual-dom

Employing state management in React to toggle the sidebar

A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available. Link to the Example The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes. To ensure the side ...

javascripthtmlcssreactjs

The pagination functionality in the customized React Native list component is malfunctioning

In my customized list component known as TableList, there is a pagination functionality implemented. However, a peculiar behavior occurs when the user interacts with the pagination arrows. Upon clicking either the next or previous arrow for the first time ...

javascriptreactjsreact-native

What could be causing the 403 Error when using Blogger API with AngularJS?

I'm relatively new to working with 3rd Party APIs and I'm currently exploring how to integrate Blogger's API into my AngularJS website to create a blog feed feature. After setting everything up, I've made a request and received a 200 s ...

javascriptangularjsapigoogle-apiblogger