Why do certain URLs bypass the filters despite not meeting the criteria in the Chrome extension?

I am currently developing a Chrome extension that is designed to automatically close tabs when specific URLs are visited, helping me stay focused and avoid distractions.

The list of sites that should trigger tab closures includes:

  • YouTube
  • Facebook
  • Reddit
  • Twitter

Interestingly, I have encountered a situation where some URLs that do not match the specified filters are still being closed. For example:

Could you offer some insight into this issue?

Below is a snippet of the code used in my extension:

  chrome.webNavigation.onDOMContentLoaded.addListener(function(data) {
        chrome.tabs.remove(data.tabId);

  }, {url: [
    { hostContains: '.youtube' },
    { hostContains: '.twitter' },
    { hostContains: '.reddit' },
    { hostContains: '.facebook' }
    ]
  });

Any help or suggestions would be greatly appreciated!

javascriptgoogle-chromeurlbrowsergoogle-chrome-extension

Answer №1

The webNavigation API is a powerful tool that can also detect iframes, so it's important to verify the frameId value before taking any action:

chrome.webNavigation.onDOMContentLoaded.addListener(data => {
  if (!data.frameId) {
    chrome.tabs.remove(data.tabId);
  }
}, {
  url: [
    { hostContains: '.youtube' },
    { hostContains: '.twitter' },
    { hostContains: '.reddit' },
    { hostContains: '.facebook' },
  ],
});

In addition, consider using the chrome.webNavigation.onCommitted event as it provides an early indication when a tab starts loading.

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

Using the val() function on a select element can occasionally result in a null value

Having an issue with my select. For some reason, when I use $(".test").val(), it sporadically returns null. Can't seem to figure out what's causing this inconsistency. console.log($('.test').val()); <script src="https://ajax.googl ...

javascriptjqueryhtmlselect

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

javascriptjqueryhtml

Improving code efficiency for checkboxes in upcoming TypeScript versions

Is it possible to create a single checkbox component and dynamically pass different values to it without repeating code? I have set up these checkboxes to help me check the maximum and minimum values of some API data. const[checkValMax, setCheckValMax]= u ...

javascriptreactjsnext.jstailwind-css

Yii employs the use of quickdlgs to efficiently generate fresh entries within the CGrid view

Within my web application, I am attempting to implement an iframe button using quickdlgs to create new records. However, upon clicking the iframe button, instead of being directed to the 'create' webpage, I am presented with an empty iframe. Here ...

javascriptphpjqueryyiiyii-extensions

Electron Web Workers do not have compatibility with NodeJS modules

I'm currently working on a desktop application using Electron paired with ReactJS. From the initial renderer process, I create a hidden BrowserWindow to launch another renderer process. Within this new renderer process, I set up a web worker that wil ...

javascriptnode.jselectronweb-worker

What is the purpose of using *//<![CDATA[* and *//]]>* in a jQuery code snippet?

Check out this JavaScript code snippet that I have: <script type="text/javascript> //<![CDATA[ jQuery(document).ready(function() { jQuery("#page_template option[value='sidebar-page.php']").remove(); }); ...

javascriptjquery

What is the best way to effectively link promise calls that rely on each other?

Here is the code snippet I am currently working with: const request = require('request-promise'); request(validateEmailOptions).then(function(result) { if (result.valid) { request(createUserOptions).then(function (response) { if (re ...

javascriptnode.jspromisebluebird

Display a webpage containing error messages and user input that can be sent back to the AJAX request

My form collects user information such as name, surname, etc. Here is an example of one input field: <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name" value= ...

javascriptjqueryajaxlaravellaravel-blade

Ensure that newly added elements are aligned with the settings of the slide's

I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...

javascriptjqueryhtmlcss

Display the data returned from a computed property PromiseResult using VueJS

After calculating the property shown below, it will output res, which is a Promise object. The reason I cannot place this script inside the created() or mounted() hook is due to the fact that this.selectedObject is null at that time. I am satisfied with t ...

javascriptvue.jspromisecomputed-properties

Issue detected in rxjs-compat operator's shareReplay file at line 2, column 10:

I've encountered an issue with the angular material spinner I'm using in my project. The error message is as follows: ERROR in node_modules/rxjs-compat/operator/shareReplay.d.ts(2,10): error TS2305: Module '"D:/ControlCenter/ofservices ...

javascriptangulartypescriptrxjssingle-page-application

EaselJS - Utilizing multiple canvases with varying frame rates

Currently, I am exploring EaselJS by creating two animation instances using sprite sheets on two separate canvases positioned at different locations but with the same z-index. The issue I am facing is that these instances are not layered properly. My setup ...

javascripthtmleaseljs

Sharing information among v-for divisions - Vue.js

I am currently delving into the world of VueJS. While my code may not be the most elegant, it does the job almost as intended. The issue I am facing is that the API provides the title and href separately in different v-for loops, even though each loop only ...

javascriptvue.jsaxios

Exploring the capabilities of Three.js Projector and Ray components

Recently, I've been experimenting with the Projector and Ray classes for collision detection demos. My main focus has been on using the mouse to interact with objects by selecting or dragging them. While studying examples that utilize these classes, I ...

javascript3dthree.js

What is the reason behind the execution of componentDidMount occurring after componentWillUnmount?

I have been exploring the differences between componentDidMount and componentWillUnmout by experimenting with the following code: class App extends React.Component { constructor(props) { super(props); this.state = { name: "", ...

javascripthtmlreactjsreact-hooksreact-lifecycle

VueJS 3 custom Checkbox fails to update UI upon clicking

I'm attempting to implement a customized checkbox using Vue 3 and the composition API based on this example. However, despite confirming through devtools that all my props and bound data are successfully passed from the parent component to the child c ...

javascriptvue.jsvuejs3vue-composition-api

Terser is causing ng build --prod to fail

When I run ng build --prod on my Angular 7 application (which includes a C# app on the BE), I encounter the following error: ERROR in scripts.db02b1660e4ae815041b.js from Terser Unexpected token: keyword (var) [scripts.db02b1660e4ae815041b.js:5,8] It see ...

javascriptnode.jsangulartypescriptwebpack

Ways to determine the total number of npm packages installed, excluding development dependencies

Is there a specific NPM command I can run from the CLI to count only the installed NPM Modules in my package that are not Dev Dependencies? When I use npm ls, it lists all packages without distinguishing between regular dependencies and DevDependencies. ...

javascriptnode.jsnpmnpm-installnode-modules

Ways to hear a variable using Google Translate

We're utilizing HTML5 and Javascript. Imagine we have a list containing the names of all players from Barcelona (for example, name = 'Lionel Messi'). I want to make the player's name audible. To achieve this, I would use: var narrator ...

javascripthtml

Get the filename of a URL using PHP

Through this code snippet, I have successfully extracted the filename from a URL: $path_parts = pathinfo($url); echo $path_parts['filename'], "\n"; $result=$path_parts['filename']; My goal is to save the $result variable t ...

phparraysstringparsingurl