Can anyone explain this to me. I'm trying to inject a CSS file onto a webpage using the content_script with Google extensions, but my css file never gets added to the webpage. Can someone tell me what I'm doing wrong and help me fix it? thanks
Manifest:
{
"name": "Extension",
"version": "0",
"description": "",
"permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*", "file:///*/*"],
"css": ["myStyles.css"],
"js": ["myScript.js"],
"all_frames": true
}
]
}
myStyles.css
#test {
margin: 0 10px;
background: #fff;
padding: 3px;
color: #000;
}
The style sheet is actually injected, but not applied, because other styles override the rules. To get the rules to work, you have some options:
Increase the specificity of your CSS rules.
Suffix every rule with !important:
#test {
margin: 0 10px !important;
background: #fff !important;
padding: 3px !important;
color: #000 !important;
}
Inject the CSS via a content script:
myScript.js:
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);
manifest.json
{
"name": "Extension",
"version": "0",
"description": "",
"manifest_version": 2,
"permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*", "file:///*/*"],
"js": ["myScript.js"],
"all_frames": true
}
],
"web_accessible_resources": ["myStyles.css"]
}
The last key, web_accessible_resources is necessary when manifest version 2 is active, so that the CSS file can be read from a non-extension page.
If you want to target a specific website do:
"matches": ["https://*.google.com/*"]
That //* before .google is the real trick for me as using www doesn't works.
Related
I'm learning Sass and I choose to try with Scss syntax, but there is an error when I try to complile the scss code to css.
Here is the command line's error:
> starter#1.0.0 compile:sass C:\Users\xxx
> node-sass sass/main.scss css/style.css
{
"status": 1,
"file": "C:/Users/xxx/sass/main.scss",
"line": 14,
"column": 1,
"message": "Invalid CSS after \"*\": expected expression (e.g. 1px, bold), was \",\"",
"formatted": "Error: Invalid CSS after \"*\": expected expression (e.g. 1px, bold), was \",\"\n
on line 14 of sass/main.scss\n>> *,\r\n ^\n"
}
This is my Scss file:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html{
font-size: 62.5%;
}
body{
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 1,7;
color: #777;
padding: 3rem;
box-sizing: border-box;
}
And I'm running it through the Package.json:
{
"name": "starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"node-sass": "^4.14.1"
}
}
For some reason it says that the universal selector is not Css code, and I tried by comenting that selector out but then it says the same for the html selector.
-------UPDATE-------
The error stopped once I used the 7-1 css architecture. The universal selector became acepted when I put it in another file, so the problem was fixed but I don't know why.
I have tried ::placeholder or ::-webkit-input-placeholder selector for input to change placeholder's color.But I find only setting color was failed, other attributes like text-align or font-weight work well.
Adding '!important' also not work.I have used vue-loader && css-loader && autoprefixer.But it works well in codepen with only simple input and simple css code.
Here is my webpack config
[
{
test: /\.scss$/,
use: ['style-loader','css-loader', 'sass-loader?sourceMap=true']
},{
test: /\.less$/,
use: ['style-loader','css-loader', 'less-loader']
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
loaders: {
scss: 'style-loader!css-loader!sass-loader',
css: 'style-loader!css-loader'
},
postcss: [
require('autoprefixer')({
browsers: ['Android >= 4', 'ChromeAndroid >= 46', 'iOS >= 8']
})
],
esModule: false
}
}]
}]
Please try following code that may set alignment and color for the placeholder.
::-webkit-input-placeholder { /* Edge */
color: red;
text-align:center;
}
:-ms-input-placeholder { /* Internet Explorer */
color: red;
text-align:center;
}
::placeholder {
color: red;
text-align:center;
}
Hope this works for you.
Thanks
I finally find -webkit-text-fill-color which cover color, no matter if use !important ...
So I am trying to contain 2 chart.js in a main div with position:relative. somehow, if I don't set the vw or the vh correctly, they will be outside the container. is there anyway to prevent this?
here is the code:
var ctx = document.getElementById('example1').getContext('2d');
var myLineChart = new Chart(ctx, {
"type": "bar",
"data": {
"labels": ["some", "thing", "came", "up", "today"],
"datasets": [{
"label": "abs_base_notional",
"data": [10.106688, 24.342801, 25.908431, 98.147767, 94.194484],
"backgroundColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"],
"borderColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"]
}]
},
"options": {
"title": {
"text": "test in (M$)",
"display": true
},
"legend": {
"display": false
},
"scales": {
"xAxes": [],
"yAxes": []
}
}
})
var ctx = document.getElementById('example2').getContext('2d');
var myLineChart = new Chart(ctx, {
"type": "bar",
"data": {
"labels": ["some", "thing", "came", "up", "today"],
"datasets": [{
"label": "base_notional",
"data": [-4.95651, 13.800001, -0.404782, 98.147767, -2.787737],
"backgroundColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"],
"borderColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"]
}]
},
"options": {
"title": {
"text": "second test (M$)",
"display": true
},
"legend": {
"display": false
},
"scales": {
"xAxes": [],
"yAxes": []
}
}
})
.row {
text-align: center;
margin: auto;
width: 90%;
height: 90%;
border-size: 2px;
border-style: solid;
border-color: black;
}
.chart-container-double {
display: inline-block;
position: relative;
margin: auto;
height: 20vh;
width: 40vw;
border-size: 2px;
border-style: solid;
border-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="row">
<div class="chart-container-double">
<canvas id="example1"></canvas>
</div>
<div class="chart-container-double">
<canvas id="example2"></canvas>
</div>
</div>
Also, I am quite new to html/css/js so I see that there is errors but I don't know how to fix them. any help would be appreciated!
thanks
you should learn about flex-box. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without having to use floats or positioning.
you can start here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Another option is to use Bootstrap.
Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.
https://getbootstrap.com/
hope this helps
I would like to remove the glow, a.k.a outline, of the PrimeNG checkbox component. (I know, I know. It's for accessability and all, but I'm implementing this indicator myself)
I've tried to set every thinkable class or selector to outline: none, and even the big bang approach with
*:focus {
outline: none !important;
}
But nothing seems to work...
What do I need to do to get rid of it?
Thanks!
Edit, My angular-cli.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.sass",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "sass",
"class": {
"spec": false
},
"component": {}
}
}
And at the top of my styles.sass I import my primeng.scss file:
#import 'primeng'
In the omege theme.scss line 242 you will see:
.ui-chkbox-box.ui-state-focus,
.ui-radiobutton-box.ui-state-focus {
-moz-box-shadow: 0px 0px 5px #1f89ce;
-webkit-box-shadow: 0px 0px 5px #1f89ce;
box-shadow: 0px 0px 5px #1f89ce;
}
This is the style giving the checkbox the glow. You can set those properties to none to stop this.
.ui-chkbox-box.ui-state-focus,
.ui-radiobutton-box.ui-state-focus {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
If you don't want to edit the theme file you can override the css by doing something like:
.ui-chkbox-box.ui-state-focus {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
The example above also includes radio buttons. Just reformat the css to exclude it: .ui-radiobutton-box.ui-state-focus
This is what worked for me
:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
box-shadow: none;
}
I am using css-loader and style-loader for my CSS but all media queries are not working. I am using "webpack": "^3.4.1", "css-loader": "^0.28.4" and "style-loader": "^0.18.2".
This is my Webpack configuration:
const ExtractTextPlugin = require('extract-text-webpack-plugin')
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]-[local]-[hash:base64:6]',
camelCase: true
}
}]
}]
...
plugins: [
new ExtractTextPlugin({
filename: 'style.[chunkhash:6].css',
allChunks: true
})
]
My css file is something like this:
.container{
position: relative;
margin: 30px 15px;
padding: 50px 15px;
background: #fff;
}
#media (max-width: 768px) {
.container{
background: #fbfbfb;
}
}
and I am importing this CSS file in React code like this:
import styles from './Component.css'
try use this code
.container{
position: relative;
margin: 30px 15px;
padding: 50px 15px;
background: #fff;
}
#media only screen and (max-width:768px){
.container{
background: #c00;
}
}
<div class="container">
content her
</div>
I think that the problem is that you declared the ExtractTextPlugin, but you are using css and style loader instead.
Take a look at this setup for reference:
plugins
plugins: [
new ExtractTextPlugin({
filename: "css/bundle.css",
allChunks: true,
disable: process.env.NODE_ENV !== 'production'
}),
]
loader
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?importLoaders=1'
})
}
This would use ExtractTextPlugin with production builds, and fallback to style-loader when using webpack-dev-server because ETP doesn't support hot reloading.
Feels so silly that I wasted as much time as I did, not getting why I was facing this same issue.
Just wanted to include it here for anyone else's reference as well...
Note, There could be other reasons for this issue as well.
My issue was that I hadn't added the meta tag w/ viewport.
FYR -
<meta name="viewport" content="width=device-width, initial-scale=1" />
Hope this helps.