Losing CSS in content script - css

I'm using colorbox plugin to create a modal dialog in certain pages. The dialog is created, but I lose all borders / background overlay of my CSS... In the google chrome console I get errors like:
https://www.website.com/br/cgi-bin/images/controls.png [404
not found]
https://www.website.com/br/cgi-bin/images/border.png [404
not found]
While the files 'controls.png' and 'border.png' are in the local directory of the extension/css...
I'm injecting the CSS over content_script of Google Chrome Extension. Manifest:
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["colorbox.css"],
"js": ["jquery.min.js", "jquery.colorbox.js", "dominteract.js"],
"run_at": "document_end",
"all_frames": true
}],
I note that in the CSS source code the images are linked this way:
cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
How can I declare this directory to the chrome's extension know this is a local directory and not a remote?

To link your image you have to include your extension's directory, like this:
background:url('chrome-extension://__MSG_##extension_id__/images/overlay.png') repeat 0 0;
You might need to add your image in your manifest as a web_accessible_resource like this:
"web_accessible_resources": [
"images/overlay.png"
]

Related

How to minify internal css in NuxtJs?

I have included css files in to nuxtJs config file,
so i want to minify them but i do not want to extract them to external css file.
Is there any way of doing this?.
Code
/*
** Global CSS
*/
css: [
"~/assets/css/tailwind.css",
"~/assets/scss/styles.scss",
"~/static/js/plugins/slick/slick.css",
"~/static/js/plugins/fotorama/fotorama.css",
"swiper/dist/css/swiper.css"
],
build: {
extractCSS: false,
}
You can use PurgeCSS and the module for NuxtJS

Have your chrome extension's stylesheets overwrite the site's CSS

I am writing a Chrome extension to modify the CSS of a specific page. Although, when I try to apply styles using style.min.css my spreadsheet is rendered before the site's spreadsheet in the cascade. To be precise, my rules are computed before theirs so their rules override mine.
For example, if I try this
article {
background-color: red;
}
their rule gets computed last and my background won't be red.
This is what the dev tools look like. We can see my injected stylesheet doesn't have priority in the cascade.
Also this is my manifest.json without the project description and name.
"content_scripts": [{
"css": ["style.min.css"],
"js": ["main.js"],
"matches": ["https://intra.epitech.eu/*"]
}],
"permissions": ["tabs"]
So if anyone has any idea on how to go around that by prioritising your styles in a chrome extension please leave a comment :)
article {
background-color: red !important;
}
The !important tag stops other styles from overriding your styles.
You should use the !important tag lightly though. Because if you over use it you will start running into conflicting styles when your CSS file becomes very big.
As per the OP comments "run_at": "document_end" works only for js files.
So load js file at document end then insert css files dynamically by loading css files from that js file.
In manifest.json write this
"content_scripts": [
{
"js": ["main.js"],
"matches": ["https://intra.epitech.eu/*"],
"run_at": "document_end"
}
]
More specific rules override more general ones (https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade) :
#homeboard section article {
background-color: red;
}

how to use less & bootstrap in angular 6 project?

I have edit the angular.json styleext for using less
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "less"
},
"#schematics/angular:directive": {
"prefix": "app"
}
}
I create a component and test the less it works. But now i want to mix the component css/less with the bootgstrap classes.
For example I want all button in my component to have .mx-1
I type in my less:
.btnmx-1{
.btn();
.mx-1();
}
but it failed. I tried to import :
#import "../../../../node_modules/bootstrap/dist/css/bootstrap.min.css";
.btnmx-1{
.btn();
.mx-1();
}
this one also failed to compile with error : .btn is undefined
How to fix this ? I want all buttons in my component to have margin left and right 1px inherited from bootstrap
For Bootsrap:
npm install bootsrap --save
in angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
For less:
add less file type instead css (by default)
comp.component.less
in angular.json.
Set the property defaults.styleExt to less.
Here's how I use bootstrap in my project
Download bootstrap Source files from link: https://getbootstrap.com/docs/4.0/getting-started/download/
create styles folders in your project copy scss folder from resource to it and rename it to bootstrap to more clearly
create your own mixin and import it bootstrap.scss file(below all of the existing imports)
import bootstrap.scss to style.scss(or in angular.json)
In my case, I just want to use bootstrap utils classes like padding, margin,heading...so I just keep these files in my boostrap scss folder
If you need all just keep all or remove some modules that need bootstrap js to run like carousel....

How to use critical css with angular views

I want to use grunt-critical (https://www.npmjs.com/package/grunt-critical) within the Grunt taskmanager (first time using it) to increase the loadtime of my web application.
The web-app is built on AngularJS with different HTML partials. All my partials are loaded within my <div ui-view=""></div>. However when I try to run grunt-critical on the index (with the ui-view) the partials for the homepage are not loaded yet, making it hard for grunt-critical to know which classes are needed for the first render. Is there a way to solve this?
My grunt-critical task is as follows:
test: {
options: {
base: './',
css: 'src/styles/import.less',
width: 1280,
height: 960
},
src: 'src/statics/index.html',
dest: 'src/statics/index-critical.html'
}
Thanks guys!

How to inject a <style> into the head section of a page with a Chrome extension, using a content script

I'm trying to make a very simple extension, that inserts this;
<style>
span.watch-view-count:hover {opacity: 1;}
span.watch-view-count {opacity: 0;}
</style>
right before the body on any YouTube page I visit.
I tried using content script to inject the code above, first I tried putting the code in a CSS file called mycsscode.css and adding it to my manifest.json file like this:
"js": ["script.js"]
but I'm pretty sure nothing happened, since I viewed the source and couldn't find the code anywhere.
Then I tried following the first method in answer to this question but I changed the script.js to script.css hoping it would work, but nope it didn't so I'm stuck.
This are the codes I have so far;
manifest.json file:
{
"name": "Youtube views Hider",
"version": "1.0",
"manifest_version": 2,
"description": "A plain text description",
"permissions": [
"*://youtube.com/*/",
"tabs"],
"content_scripts": [{
"matches": ["*://youtube.com/*/"],
"js": ["myscript.js"]}
]
}
myscript.js:
var s = document.createElement('script');
s.src = chrome.extension.getURL("script.css");
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
Note: I'm almost an illiterate when it comes to coding lingo, so please put it in layman's terms.
If you are just inserting/changing CSS, don't even bother with that javascript. Change the manifest to:
{
"name": "Youtube views Hider",
"version": "1.0",
"manifest_version": 2,
"description": "A plain text description",
"content_scripts": [ {
"matches": ["*://*.youtube.com/*"],
"css": ["myCSS.css"]
} ]
}
Where myCSS.css is just:
span.watch-view-count {opacity: 0 !important;}
span.watch-view-count:hover {opacity: 1 !important;}
Note:
Changed the matches value to work on actual YouTube URL's -- Which usually have the form: http://www.youtube.com/watch?...
Note the use of the !important keyword.
If you insist on programmatic injection, see "How to inject CSS using content script file in Chrome extension?".
PS: If all you really want to do is alter a page's look or CSS, the Stylish extension is the fastest easiest way to do that in either Chrome or Firefox.
There are also thousands of pre-made styles available at userstyles.org.
I just read that you say you are a coding layman. Creating an extension is the hard way.
An easier way is to add the Chrome extension called Tampermonkey to achieve page modification.
Here is a nice tutorial to get you started with creating a script for Tampermonkey ( Greasemonkey in Firefox ).
This way to you don't need to worry about the mechanics of running a script on a page.

Resources