In chrome extension manifest I have support for iframes.
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"css": [],
"js": [
'someScript.js'
],
"all_frames": true
}
]
Everything is fine until iframes are instantiated during page actions, not before page load. When iframe will be created later content scripts are not injected to new iframe. How can I make content scripts work in dynamically instantiated iframes?
Related
I use different css in my landing page component and dashboard component so either the landing page or dashboard does not work depending on css. When I remove from index.html these two lines:
<link href="./assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="./assets/css/paper-dashboard.css" rel="stylesheet"/>
and in angular.cli I set:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"assets/sass/paper-kit.scss",
"assets/css/demo.css",
"assets/css/nucleo-icons.css"
]
my component (landing page) works properly but dashboard doesn't. However when I add mentioned two lines to index.html and in angular.cli I set:
"styles": [
"styles.css"
]
my landing page doesn't work properly however dashboard does. I set styleUrls in the way shown below however they don't seem to be working properly. Does anyone have an idea how can I solve my problem? I need to have both components working properly. It seems to me that I need to set css for every component separately as I have tried without results but I am not sure whether it is a good idea?
#Component({
selector: 'dashboard-cmp',
moduleId: module.id,
templateUrl: 'dashboard.component.html',
styleUrls: [
'../../assets/css/paper-dashboard.css',
'../../assets/css/bootstrap.min.css'
]
})
UPDATE
I noticed that when angular.cli styles looks in this way:
"styles": [
"styles.css",
"assets/css/bootstrap.min.css",
"assets/sass/paper-kit.scss",
"assets/css/demo.css",
"assets/css/nucleo-icons.css",
"assets/css/paper-dashboard.css"
]
my dashboard component works properly however landing page doesn't. When I change styles to:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"assets/sass/paper-kit.scss",
"assets/css/demo.css",
"assets/css/nucleo-icons.css",
"assets/css/paper-dashboard.css"
]
my landing page component is working properly and dashboard doesn't. So I try something like this - in dashboard.component.ts I set styleUrls: ['./dashboard.component.css'] and in dashboard.component.css I add #import url('/../../assets/css/bootstrap.min.css');. Unfortunately still landing page is working properly and dashboard doesn't. Any ideas why?
Components are encapsulated magic, its like you own room rather than the whole house. When you paint only your room(component) with the paint that your parents decided for your house (index.html), the paints won't be visible outside.. when you wan to paint the house like your parents told you go for outside as a whole(index.html), or if you want customized room, paint only in your room(component)
In angular css have two scopes i.e global and component scope. Css defined in global scope is applied through out the application means in all components. For global scope include the css in index.html file or register in the styles section of .angular-cli.json file.
In angular-cli.json file
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
The styles specified in #Component metadata apply only within the template of that component.
In Component
styleUrls: [
'./paper-dashboard.css'
]
https://angular.io/guide/component-styles
I want to use materializecss in my chrome extension.
The extension adds some functionality to gmail. Unfortunately the materializecss seems to interfere with the gmail stylings. Is it possible to isolate the scope of the materialize css or to add a custom prefix to the classes?
I currently import the css in my manifest.json
"content_scripts": [
{
"matches": ["*://mail.google.com/*"],
"css": [
"vendor/materializecss/materialize.min.css"
],
...
Not without rewriting the whole framework (the scss files) or using scoped stlyes.
There is gulp-class-prefix plugin to prefix CSS classes. Here is the configuration file
var gulp = require('gulp'),
classPrefix = require('gulp-class-prefix');
gulp.task('prefix', function () {
return gulp.src('SOURCE_OF_CSS_FILE')
.pipe(classPrefix('YOUR_PREFIX'))
.pipe(gulp.dest('DESTINASTION_FOLDER'));
});
gulp.task('default', ['prefix']);
but this will only prefix only CSS file and will work only for the components that do not need JS inclusion. For dynamic components, you need to make changes in materiazecss.js file.
Update
I got this python script. This script is designed for bootstrap. But anyhow this works(70%-80%) for materializecss too. You just need to change the file name in the main function of it ie replace bootstrap with materializecss.
I'm injecting some JavaScript (JS) code into a pre-existing website with a Google Chrome extension that I'm building.
The JS gets injected every time I reload the extension and the webpage but my CSS doesn't always get applied. Unlike the JS, which I inject into the webpage's DOM using my content script, I apply the CSS using this code:
"content_scripts": [{
"matches": ["https://aparticularwebsite.com/*"],
"js": ["js/myContentScript.js"],
"css": ["css/myCss.css"],
"all_frames": true,
"run_at": "document_end"
}]
Should I also be injecting my CSS into the DOM using the same method that JS gets injected?
For definitions of 'injected script' and 'content script' see the first answer to this question.
I am using Webpack 2 and webpack-dev-server together with Sass loader, actual configuration:
{
test: /\.scss/,
loaders: [
"style",
{ loader: "css", query: { modules: false, sourceMap: true } },
{ loader: "resolve-url" },
{ loader: "sass", query: { sourceMap: true } }
]
}
This works quite well and the image referenced in background: url() is processed by webpack and also replaced in the style for something like background-somehash.jpg, this file can be accessed by typing http://localhost:8080/background-somehash.jpg. It also works when I provide whole url (including localhost) in a style background definition using developer tools...
The only thing that don't work is the original css produced by webpack which looks like background: url(background-somehash.jpg). I also tried various urls like ./, ../, ../../ or ./images/ to try out if root was set somehow differently. What I don't get is that the file is readily available at the root...
EDIT:
When used together with extract-text-webpack-plugin which extracts styles into separate real styles.css file it works just fine. The question is why it doesn't work when final css is being served from javascript bundle ?
CLARIFICATION:
Everything is referenced correctly, the image is available, it all works when I extract css into separate file using extract-text-webpack-plugin it just doesn't work when the completely same css is served from bundle.js which is then referenced in the index.html like <link href="blob:..." rel="stylesheet">
Things you should check:
Is the referenced image recognized by webpack?
Just delete the image and check if the webpack build fails. If that's the case, it is not an issue with your loader configuration.
Check the requested URL with your browser developer tools
If the request is terminated with a 404:
Check if output.publicPath (webpack) / contentBase (webpack-dev-server) point to the same location. This is from the browser's perspective (=no absolute file paths)
If you're using a <base>-tag, you need to ensure that it does replace the base URL correctly.
I am using a MediaWiki wiki with custom skin. Now I see the CSS code of my custom skin overridden by the CSS code of MediaWiki itself.
How can I change the order of loading CSS code?
There does not appear to be a straightforward method to loading your CSS after the MediaWiki styles, as it is loaded by the primary resource loader via load.php on your page (View source on your web page to see your resource names listed first, generally, e.g. ext.MySkin.styles as outlined below), but I have found a solution which worked for me.
Within your skin.json or extension.json (or your PHP code) you can add a "group" field with the value of "site" to load your extension stylesheet after the main CSS for the site has been loaded.
For example, in your skin.json or extension.json:
{
"name": "MySkin",
...
"ResourceModules": {
"ext.MySkin.styles": {
"styles": [
"my-skin.css"
],
"group": "site"
},
"ext.MySkin.js": {
"scripts": [
"my-skin.js"
]
}
},
...
}
Check out the documentation for $wgResourceModules as well as the Group definitions which is linked there as well.
MediaWiki will load your extension/skin styles as a 2nd page request which is not optimized, but it will work in this application as you desire and your CSS will overwrite previous values within the skin, so for most applications this is appropriate, and works.