I have a problem. I had a app on the manifest v1.
But now it tells me to change it to v2. But it gives me an error like:
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'
chrome-extension-resource:".
I tried to change in the manifest:
"web_accessible_resources": [
"jquery-1.7.1.min.js",
"plugin.js"
]
But in the html code, I have:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script src="plugin.js"></script>
How do I put it now? Should I delete that? If i delete it won't run! My popup doesn't even opens anymore :|
Hope you understood my problem, thanks
(I'll thank more if someone gave an example of API v2 using javaScript to download :) )
This error usually means that there is some script being executed directly inside your HTML page, not included via an external javascript file.
For example:
<script type="text/javascript">alert('hello');</script> embedded inside your html file is an inline script. The correct way to do it would be
<script type="text/javascript" src="hello.js"></script> .
Your file hello.js would include alert('hello');
I hope this helps.
Related
https://v3.vuejs.org/guide/installation.html#download-and-self-host
https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler
how do I import vue without CDN?
so what I care about is not having a build step. everything in pure human-legible js.
I found this https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack
I'm going to try and implement it inside unity Embedded browser https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459
the challenge is that my interface cannot load things from the web and it can't be compiled.
Create index.html
index.html (using Vue 3 - important!)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Minimalistic Vue JS</title>
<script type="text/javascript" src="./vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = Vue.createApp({
data() {
return {
message: "Hello world"
}
}
})
app.mount("#app")
</script>
</html>
Download vue.global.prod.js from https://unpkg.com/browse/vue#3.0.11/dist/vue.global.prod.js and save it along index.html
Open index.html in browser
Works just fine in Chrome or Firefox.
Notes
for the record my code is the repo I linked plus the vue libraries I downloaded and added in the root
Note: following is related to the repo linked before question was changed
The code in repo is written for Vue 2 (just try to open https://unpkg.com/vue in the browser). So if you downloaded distros for Vue 3 (for example the link I'm using above) the code from repo will not work
Even if you download Vue 2 version, the code in the repo will not work when opened from file system as it is using native ES6 modules - problem I described in the previous version of my answer:
As described here and here ES6 modules are always loaded with CORS. So just opening the index.html in the browser (without using server) will not work (definitely does not work in Chrome). Maybe Unity Embeded Browser has this restrictions weakened (as it's purpose is to be embeded) but without possibility to use desktop browser to develop and test your app, your experience will be terrible. I would reconsider the decision not to use bundler...
Update 1
Building Vue.js Applications Without webpack (sample project) will not help you either as it is again using native ES6 modules
To use Vue as a module from a local installation, you don't want to explicitly include it in a script tag in your page. Instead, import it in the scripts that use it. The whole idea of modules is that you can import them which makes explicitly including them in your page obsolete.
In https://bitbucket.org/letsdebugit/minimalistic-vue/src/master/index.js, import Vue:
import * as Vue from "./local/path/to/vue.esm-browser.prod.js";
I'm currently new to Vue.js and front end developper.
I'm following Vue.js introduction.
Here's my index. html.
There's no code to show about app.js given I erase everything.
<html>
<body>
Hello World !
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./app.js"></script>
</html>
However when I use a http-server to display my page there's one error.
And then it's ONLY when I refresh the page that I note that the error is:
[Vue warn]: Cannot find element: #app-5
Does anyone can explain me why it cannot find app5 ? index.html doesn't have any
<div id="#app-5">
and my app.js is empty so how is it possible that the browser is still looking for app-5 ?
Thanks
If JavaScript doesn't update after a refresh, in addition to a force refresh mentioned by Patrick Steele, you can disable the cache when the developer tools window is opened.
In Chrome:
In Firefox
I'm using the Swashbuckle NuGet package to create Swagger documentation for my API. https://www.nuget.org/packages/Swashbuckle
I'm trying to make some minor changes to the UI - essentially just to add some corporate branding to the header.
I have added two files as embedded resources to my project, in a directory called resources.
These are injected into the UI via:
.EnableSwaggerUi(c =>
{
c.InjectStylesheet(thisAssembly, typeof(SwaggerConfig).Namespace + ".Resources.Swagger.css");
c.InjectJavaScript(thisAssembly, typeof(SwaggerConfig).Namespace + ".Resources.Swagger.js");
}
Which results in the following link being added to rendered page.
<link href="ext/ang_nav_api-Resources-Swagger-css" rel="stylesheet" type="text/css" media="screen">
This is all correct and the stylesheet works as expected.
However the .js script doesn't appear on the client.
Changing the c.InjectJavaScript to c.InjectStylesheet does inject the file as a <link> .. so I'm happy that the file itself is correctly embedded etc.
What could be wrong here?
The .js script will not appear on the client. (not on the way you would expect)
Look closely to the code of index.html:
https://github.com/domaindrivendev/Swashbuckle/blob/8223bedae706fec612c98ebbcee6b2d7033ae349/Swashbuckle.Core/SwaggerUi/CustomAssets/index.html#L98
Your customScripts will be loaded dynamically on the onComplete event
$.getScript(script);
Iam trying to create a application that should work offline without internet connection.
I gave as below to point to local dojo.js so that can work without internet connection.
<script type="text/javascript" src="/dojo-release-1.9.3/dojo/dojo.js" dojo-data-config="parseOnLoad:true">
Do i need to do something else?
Thanks in advance.
Try including dojo like the following code if the WebContent folder is in the same directory as your main html file:
<script type="text/javascript" src="WebContent/dojo-release-1.9.3/dojo/dojo.js" dojoConfig="parseOnLoad: true, isDebug: true" ></script>
The isDebug parameter set to true will display more info in the console when loading the page, especially useful for Firefox and the Firebug console.
In trying to create a custom build for an application, I followed these steps -
1. Added the following in the index.html header
<script type="text/javascript" src="ext/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
My app.js file looks like this -
Ext.application({
name : 'App',
requires : [
'Ext.*',
'App.view.Viewport'
],
autoCreateViewport : true,
controllers : [ 'MainController' ]
});
Afterwards, I run the following commands
sencha create jsb -a http://127.0.0.1/index.html -p app.jsb3
sencha build -p app.jsb3 -d .
Once, the app-all.js file is created, I modify the header to look like this -
<script type="text/javascript" src="ext/ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>
The build seems to be happening correctly. However, the application just refuses to run!
I seem to have tried everything anyone's mentioned about 'custom builds' on the net!
Can anyone help or at least point me in the direction of a solution?
Thanks!
In the example stated in the Question, I had put the javascript file name as app.js
In my application, it was called myapp.js. When you use a custom name for the javascript file, you need to change the 'manifest' (jsb3) file to reflect the same.
Once this was done, everything worked perfectly.
The most detailed instructions are given in this post