How hover on multiple elements but affect just one element in CSS

I have .tabCapture:hover and it self it work fine it put a box-shadow when I mouse over.

My problem is that over the .tabCapture element I have others elements like: tabFooter, tabIcon and tabDescription and when the mouse ran over those the box-shadow disappear.

I’d like to know how I could have the box-shadow even when the mouse is over tabFooter, tabIcon and tabDescription ?

enter image description here

How to refer a styles.css fike from a javascript file

I am building a chrome extension. I have main.js, manifest.json, content.js, background.js, styles.css. I am using gmail.js to add extension button to the gmail ui( I understand not a good idea, any other work around suggestion is welcome). I don’t have any html file, I want to refer to 1 class of styles.css from the main.js file.
I have written following code,
inside, main.js

var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
// link.type="text/css";
link.type = "MIME"
link.href = "/styles.css";
head.appendChild(link); 

var main = function(){
  gmail = new Gmail();
  loggedinUser = gmail.get.user_email();
  // add toolbar
  if(!!!document.getElementById(location.hash)) {
  gmail.tools.add_toolbar_button('
File to DMS
`, function() { // some codes here })

inside styles.css,

.button-look {
    width: 121px;
    height: 31px;
    background-color: #d04a02;
}

But this button is not getting style from styles.css.
If I add this style inline, this is working fine. but I want to add this external style sheet

Set default height in Chrome BrowserAction Popup

I use following code to open a chrome browser action popup. I have specified min-width & min-height to html & body element, but it doesn’t seem to work, as I can see a small white box when I click on icon & then my content & styles get applied. I am trying to set default dimensions so there shouldn’t be a small white box at first at all!

chrome.browserAction.setPopup({
  popup: 'index.html',
})

In my css:

html,
body {
  margin: 0;
  min-width: 200px;
  min-height: 300px;
}

I’m not able to center an element in a Chrome extension that I’m forking

I need help with a Chrome extension that I am forking,

It’s an extension that help to manage tabs and I want the graphically representation of the tabs to be centered in the browser window.

I’ve tried numerous CSS property but nothing change and I don’t understand why ? 🤔

Things like this usually work but in this nothing change.

margin-left: auto;
margin-right: auto;  

Here’s a screenshot to have a better understanding:
enter image description here

Here’s the link to the extension as it is right now if it can help you to help me:
https://dl.dropboxusercontent.com/s/ok7zj2fwqp9bdgu/TabsPaneMikhoulFork.7z

Regards ! 😊

Could we attach local css file to a current open webpack

I need to develop CSS on a dedicate webpage.

To accelerate the dev time, is there a way to attach my local css file to a opened page and the styles will be updated without reloading the current page? I mean the local css file is not existing on that webpage.

As far as I know, I could map a local css file to a css file on that page.

element does not render until I toggle the position in dev tools

I am doing a small job customizing a wordpress theme, so some if this issue is my unfamiliarity with the entire stylesheet.

I have an issue where the mobile navigation menu does not render until I toggle the position: fixed element in chrome’s dev-tools.

When I toggle the css position attribute the element’s position becomes static, and then back to fixed when I re-enable the position in dev-tools.

I’ve never experienced this issue before, and have exhausted my research efforts.

Since I’ve inherited this code from a wordpress theme, I’d rather not post the entire stylesheet here. Instead I am going to post a video of the issue – I hope this helps. https://vimeo.com/user88138701/review/283511450/b58f06ff06

I’m happy to provide additional details.

This is my first post so apologies if I did not initially provide enough information.

Thank you in advance for taking a look.

Inject boostrap css modify the main page

I am trying to create a sidebar insted to popup using chrome extension but when I inject boostrap css into the sidebar the main page is modify. In this case I tried to open the sidebar into Google page and it remove the google’s icon.enter image description here

this is the code that i used:

var href = chrome.extension.getURL("/styles/bootstrap.min.css");
var inputTag = 'n' +
'
' + '
' + ' n' + ' n' + '
n' + '
'; var Sidebar = { DOM_ID: "my_sidebar", sidebar: null, isOpen: false, CSS_COMMON: " position:fixed; top:0px; right:0px; width:325px; height:100%; padding:8px; background:white; border-left: 2px solid #999; z-index:9999999999; overflow:scroll; ", init : function(){ }, open : function() { if (!Sidebar.sidebar){ // create new sidebar var sidebar = document.createElement('div'); sidebar.id = Sidebar.DOM_ID; Sidebar.sidebar = sidebar; document.body.appendChild(Sidebar.sidebar); var getSideBar = document.getElementById('my_sidebar'); getSideBar.innerHTML = inputTag; var url = document.getElementById("myLink"); url.setAttribute("href", href); } Sidebar.sidebar.style.cssText = Sidebar.CSS_VISIBLE; Sidebar.isOpen = true; return Sidebar.sidebar; },

Could someone help me with this issue?

how can I add custom favicon to some websites without favicon in chrome?

fixed tabs

As shown in the figure, some websites don’t have favicons. So, Using the fixed tab make them messy.

How can I check if a button within the DOM is pressed?

I’m trying to build a Chrome extension which collects 3 pieces of information that are both on a web page. I need the contents of a span element and I also need to know if 1 of two buttons has been pressed, and if so, what the current time is.

I want the extension to collect the span element any time it is on the specified page, and the rest of the information if the necessary conditions are met.

I know that using content scripts is the way to go, but I’m not sure how to get information from the DOM. I’ve tried running some scripts but they don’t seem to be working at all, and Google’s tutorials on the matter are brief and not very explanatory.

I’m not sure if any of the code I have is usable for what I’m trying to do, but here’s a link to the GitHub repo: https://github.com/amastin-microcenter/LunchBox

allow user to change background colors on chrome extension

I have this code, it is working changing the backgroung color when i test it from my cPanel, but when i refresh the page example I have set red color and i refresh the page, that do not show the red color thast shows default color, and when I test it from extension, thats does not give any function, does not change any color? somone can help me to fix this? Thank you very much.