I'm attempting to use LESS in a tab created via a Chrome extension (chrome.tabs.create), but I'm getting a cross domain error ("NETWORK_ERR: XMLHttpRequest Exception 101"), referring to the LESS JavaScript file. I'm not clear on how to set up the permissions. Adding the LESS JavaScript file to "web_accessible_resources" doesn't seem to help. All other files, such as css and js files load fine. It seems I only receive this error from within the less source. Any ideas?
To explain my setup a bit more, the LESS JavaScript file and .less file are loaded in an HTML file something like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" href="static/css/main.less">
<script src="/static/js/jquery-1.8.2.min.js"></script>
</head>
<body>
Whatever...
</body>
</html>
This html file is loaded in background.js like this:
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'mypage.html'})
});
The manifest file has permissions for "tabs" and "all urls", and loads background.js.
I'm not sure where you include the client side less.js compiler. See also: http://lesscss.org/#client-side-usage. Less.js is a client-side javascript. It seems the less.js loads from an other URL (domain) than your main.less file. This can be fixed by enabeling CORS, see: http://enable-cors.org/. On the domain where home.less has been installed, the server should send an Access-Control-Allow-Origin: * header.
less.js loads the less files with a XMLHttpRequests which supports CORS for most modern browsers see http://caniuse.com/#search=cors. More details can be found at http://www.html5rocks.com/en/tutorials/cors/
For development use less.js from local folder.
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
for release use any less compiler like lessc.
Related
Below Given is my code from which I am trying to print pdf file.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="print.min.js"></script>
<link rel="stylesheet" type="text/css" href="print.min.css">
</head>
<body>
<script type="text/javascript">
function sample(){
printJS({
printable: "test.pdf",
type: "pdf",
});
}
</script>
<button onclick="sample()">Click Me</button>
</body>
</html>
but it is not working and diving below error on chrome console
Access to XMLHttpRequest at 'file:///test.pdf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
I am following all the rules said in documentation of Print-js. my {.pdf} file and {.html} file are in same folder. It is Working Fine with {.jpg} File.
Please help me.
I am sharing link of the script I have included in my head tag
JS:- https://printjs-4de6.kxcdn.com/print.min.js
CSS:- https://printjs-4de6.kxcdn.com/print.min.css
It was the problem regarding "Cross origin requests". To solve this you need to start your local server. in my case I started Xampp and moved my files to htdocs folder and BOOM it worked.. I Still dont know why it was working for images and not for pdfs.
HERE IS THE ANSWER ON STACK-OVERFLOW THAT HELPED ME.
https://stackoverflow.com/a/20578692/10333164
I have deployed a React + NodeJS app in Heroku and the deployment went well and worked for a few hours. However, after a cache deletion, it now refuses to load the page. The errors are the following ones:
Refused to apply style from 'https://flix-reloaded.herokuapp.com/src.78399e21.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
and
GET https://flix-reloaded.herokuapp.com/src.78399e21.js net::ERR_ABORTED 404 (Not Found)
The first one, the MIME error refers to a minified file produced by a Parcel build. It is called in a index.html file that lives inside the dist folder. This is the line calling it:
<link rel="stylesheet" href="/src.78399e21.css">
Its twin .js file is also called within index.html:
<script src="/src.78399e21.js"></script>
Problem 1): I don' know what to do to make the CSS file accepted. within it, there are some comments imported from the SCSS original files related to each component. I tried both to remove the comments and add the type of the file as CSS but it hasn't worked. It should be a subtle detail, but I don't know what else to attempt.
Problem 2: The JS file that Heroku is not finding it is at the same folder of the index.html. However, the routing of the app has been defined to have client (Router basename="/client") as root (https://flix-reloaded.herokuapp.com/client). If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
I tried to run another Parcel build, commiting changes, clean caches, but nothing worked. Can anyone provide me some help? I'll be happy to provide further details if necessary.
The index.html file code that lives inside the dist folder (where the production files live):
<html>
<head>
<title>myFlix</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/src.78399e21.css"></head>
<body>
<div class="app-container"></div>
<script src="/src.78399e21.js"></script>
</body>
</html>
Thanks in advance
If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
This is because you need to make the same /client/ fix to the <script src="/src.78399e21.js"></script> line.
In both cases, you've got the wrong URL for your CSS/JS files, and as a result the CSS/JS parsers are trying (and failing) to process the resulting 404 page's HTML as CSS/JS.
I create a web browser in python3 with pygobject (gtk3 and webkit2) and I want create a home page include google. I create a html file with a iframe but I see the error :
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
How I can set X-Frame-Options ? All the solution in the web is a configuration in a local serveur but I don't have local serveur.
Here is my home page
<!DOCTYPE html>
<html>
<head>
<title>(Nouvelle page)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<iframe src="https://www.google.com/"></iframe>
</body>
</html>
This is not something you can fix locally, unfortunately.
There is a similar question here: https://stackoverflow.com/a/8700754/2773979
The problem isn't that your page is missing that header, it is that Google sets this header precisely to prevent people from embedding the site into an iframe. Browsers comply to this by refusing to load/display the content of the iframe.
Note that there are solutions, like proxying the google page, but those are probably against the terms of service.
I have built a small node server using express and I want to serve index.html which contains angular app. How ever the browser sends GET request for favicon.ico. I have installed serve-favicon, however still it looks for physical file. Is there a way to override it? or from where can I find such file
The recommended way is actually just to use a link tag in your index.html:
<link rel="icon" href="/img/favicon.png">
Just change the href to link to an img in your public folder and you're good to go.
http://www.w3.org/2005/10/howto-favicon
You can use this site to get free favicon.ico
Then add your favorite favicon.ico to your html .
<link rel="icon" type="image/png" href="../images/favicon.ico" />
I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?
No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).
I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.
It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.
You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}