I inject a iframe from content script into a page. The iframe run an angular application. I want to access the parent window's content from this angular script. How can I do it?
Partial manifest.json
"content_scripts": [
{
"css": [
"css/inject.css"
],
"js": [
"scripts/inject.js"
],
"run_at": "document_end",
"all_frames": false
}
],
"web_accessible_resources": [
"frame.html"
]
frame.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/angular-csp.css" type="screen">
<title>name</title>
</head>
<body>
<div class="popup" ng-app="popup" ng-csp>
<div ui-view></div>
</div>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
</body>
</html>
You can't do it directly; cross-origin restrictions apply.
Instead, you need to message your content script to manipulate/query the page for you.
Related
There's a problem with Vite and React when having dynamic routes (list/:id). Only on dev.
Using vite dev server with --build option enabled:
vite:html-fallback Not rewriting GET /list/src/index.tsx because the path includes a dot (.) character. +47ms
However this should be fixed by adding plugin: https://github.com/vitejs/vite/issues/2245
vite.config.js:
plugins: [
react(),
{
...pluginRewriteAll(),
}
],
But it's not in my case.
Sorry I couldn't find it earlier somehow, but here's the solution.
Original answer -> Getting "404 not found" when refreshing a page that has a nested route, because Vite doesn't redirect all routes to index.html
Add <base href="/" /> tag inside HTML file <head> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<meta name="description" content="My App" />
<title>My App</title>
<base href="/" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="src/index.tsx"></script>
<div id="root"></div>
</body>
</html>
I have an EXTJS6.5 application. I want to use variables in my index.html that come from a properties file. However the change of the values of these variables should not require a new build of the application. This means that the variable can be changed if required (Without the need to build the extjs code).
Can someone please help with this?
I have already gone thru other threads where index.html can have placeholders, but do not seem to have a concrete example.
This is my properties file (Runtime.js)
{
"appUrl": "http://myappurl.com",
"appId": "10"
}
Then I want to use these variables in my index.html as such:
This is my index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<script src="Runtime.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="{{Runtime.appUrl}}/configuration/MyConstants.js"></script>
<script src="{{Runtime.appUrl}}/resources/mycharts/mycharts.js"></script>
<script src="{{Runtime.appUrl}}/resources/ckeditor/ckeditor.js"></script>
</body>
</html>
Will this work this way? Or pls suggest any better way to do this..thank you very much.
Given Runtime.js file has a syntax error. Is not valid javascript file.
Runtime.js should be:
window.appUrl="http://myappurl.com";
window.appId="10";
And you can use these variables like window.appUrl/window.appid in script block, not in html block.
You can do workaround to resolve the problem: You can generate includes from Runtime.js.
Example:
index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="Runtime.js"></script>
</body>
</html>
Runtime.js
window.appUrl="http://myappurl.com";
window.appId="10";
var script = document.createElement("script")
script.type = "text/javascript";
script.src = window.appUrl+"/configuration/MyConstants.js";
var script2 = document.createElement("script")
script2.type = "text/javascript";
script2.src = window.appUrl+"/resources/mycharts/mycharts.js";
var script3 = document.createElement("script")
script3.type = "text/javascript";
script3.src = window.appUrl+"/resources/ckeditor/ckeditor.js";
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script2);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script3);
Updated 2019-07-17:
If you want to require script before application launches you must add reference to script in app.json in js block (Which can't be done because you want to personalize the source of scripts).
Second option is change in app.js you can do Ext.Loader.loadScript like:
Ext.Loader.loadScript({
url: 'my.js',
onLoad: function(){
Ext.application({
name: 'Fiddle',
extend: 'Fiddle.Application',
autoCreateViewPort: false
});
},
onError: function(){
console.log('error');
}
});`
I done all the settings including adding typescript compiler in webstorm, installing tsd with npm, and all other stuff.
I still get error 'Cannot find name Angular'
tsd.json
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"angularjs/angular.d.ts": {
"commit": "70a693ec17c7ae4b9b7c1fa6c399ac3e82e3843e"
},
"jquery/jquery.d.ts": {
"commit": "70a693ec17c7ae4b9b7c1fa6c399ac3e82e3843e"
}
}
}
sorting.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{$ctrl.mytest}}
</body>
</html>
sorting.ts
var app = angular.module('myApp', []);
app.component('sorting', {
templateUrl: 'modules/sorting/sorting.html',
controller: SortingClass
});
class SortingClass {
public mytest: string = 'abcd';
}
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title> Facility</title>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script src="modules/sorting/sorting.js" type="text/javascript"></script>
</head>
<body>
</body>
My friend, you have lot of syntax errors. Please have a look at the basics of angular js. For now, try this code. This should work:
Index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title> Facility</title>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script src="modules/sorting/sorting.js" type="text/javascript"></script>
</head>
<body ng-controller="sorting as ctrl">
<div> {{ctrl.mytest}} </div>
</body>
</html>
Sorting.ts
module xyz {
var angular: any;
var app = angular.module('myApp', []);
app.controller('sorting', SortingClass);
public class SortingClass {
public mytest: string = 'abcd';
}
}
Goole chrome is giving this error
http://localhost:63342/an1/images/%7B%7Bitem.image%7D%7D.png Failed to load resource: the server responded with a status of 404 (Not Found)
But I am able to see "left image" fine when the app is run.
//---mainMenu.json----------------------------------------
[
{
"name": "item1",
"image": "abc"
},
{
"name": "item2",
"image": "abc"
},
{
"name": "item3",
"image": "abc"
}
]
//---index.html----------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<base href="http://localhost:63342/an1/">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/headerCtrl.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<main ng-view></main>
</body>
</html>
//---mainMenu.html----------------------------------------
<section class="mainMenu">
<ul>
<li ng-repeat="item in menuItems" ng-click="mainMenuSelection(item.name)">
<image src="images/{{item.image}}.png"></image>
{{item.name}}
</li>
</ul>
</section>
The browser is trying to load your unparsed template variable as a url before the desired item.image value is substituted in.
You can fix this by using ng-src instead of src on your image tag: https://docs.angularjs.org/api/ng/directive/ngSrc.
I am following a tutorial on AngularJS - "Building a website with AngularJS"
The routes I am using are pretty much the same as the tutorial :
// JavaScript Document
angular.module('quest', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {template:'partials/about.html'}).
when('/start', {template:'partials/start.html'}).
otherwise({redirectTo:'/home', template:'partials/home.html'});
});
The problem is: it only shows the path to the resource, instead of the contents of the resource, so instead of showing the html content, it just shows:
PARTIALS/ABOUT.HTML
I am not sure what I am doing wrong, but it does work, if i go to the #/about URL it shows "PARTIALS/ABOUT.HTML" if i change the url to index.html#/start it shows "PARTIALS/START.HTML"
html of page:
<!DOCTYPE html>
<html lang="en" ng-app="quest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title></title>
</head>
<body ng-controller="MainController">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/quest.js"></script>
<div ng-view></div>
</body>
</html>
Use templateUrl instead of template