I have a chrome extension that was working on the manifest version 2 without a problem. I had some javascript in the background that included web assembly and required wasm-eval. I have converted the extension to manifest version 3, which doesn't allow wasm-eval or unsafe-eval any more. What I did for a solution is I created a new window (mainpage.html) from the extension and this window includes an iframe (sandbox.html) and this iframe includes the web assembly code and communicates with the background service worker with postMessages.
I am wondering if there is a solution without opening a new window for my case. Something that will run the sandbox.html running in the background and the service worker can communicate with it. I tried to put the sandbox.html to the service worker, but the service worker doesn't accept html files running inside.
Popup script is not a solution because the user needs to click the extension icon to make it running. Content script worked but if the website has a content security policy that doesn't allow unsafe-eval, then it won't work. I need a more general solution.
There is something explained here with the Event pages for which I have no idea, and I believe it is deprecated as well. Service worker cannot have access to the DOM. https://developer.chrome.com/docs/extensions/mv3/sandboxingEval/
this is from the manifest.json
"sandbox": {
"pages": ["sandbox.html"]
}
this is what mainpage.html looks like
<iframe id="theFrame" src="sandbox.html" style="display: none;"></iframe>
<script src="mainpage.js"></script>
this is what the sandbox.html looks like
<script src="wasm_exec.js"></script>
<script src="wasm_startup.js"></script>
<script src="assign_result.js"></script>
<script src="event_listener.js"></script>
Related
I have a web application developed using Vuejs/Nuxtjs. The web application has a Vue Component page named Design.vue under pages/Design.vue. This Vue component uses the styles from the assets/css/drawflow.css. Everything works perfectly fine when I run the application locally using the command npm run dev and access the application using http://localhost:5000/. I checked the sources by inspecting on Google Chrome and I see the styles page listed there.
Now, If I try to deploy the same application using the Docker, I see that my Design.vue page is not getting the styles from the assets/css/drawflow.css. I tried to inspect in Google Chrome for that page and when I see the sources, I do not see the required style sheet.
Not sure what's happening and why the styles under the assets folder are not accessible via Docker. Can someone please let me know what needs to be changed here?
Following is the way I am accessing the styles in pages/Design.vue:
<style>
#import "https://cdn.jsdelivr.net/gh/jerosoler/Drawflow#0.0.48/dist/drawflow.min.css";
#import "~/assets/css/drawflow.css";
<!-- #import "#/assets/css/drawflow.css"; -->
</style>
I was able to find the solution. The issue was happening because of the styles provided in the CDN link: https://cdn.jsdelivr.net/gh/jerosoler/Drawflow#0.0.48/dist/drawflow.min.css.
For some reason, docker was not making requests to this file due to which styles from this file were ignored. I added those styles within my drawflow.css file and added a single style. This worked perfectly fine.
<style>
#import "~/assets/css/drawflow.css";
</style>
According to the tutorial, there are two parts of an electron app - the entry main.js file and index.html.
Do I have to include main.js as a script in the html file
How do I trigger events in the view html file to affect the state of the js app and vice versa ? How do they both communicate basically ?
You are mixing up a couple of things.
main.js is the first file called when your run your application. Before everything else. It does not run any front-end code.
Usually, in it, you create with the BrowserWindow API a chromium window, then load an .html file in it. (index.html for example).
Then, your index.html, you can call for every front JS code you want, or CSS or whatever. For example you can add there a <script src="myapp.js"></script>, which will run front-end code.
It is important to understand the difference between the main process (back-end) and the render process (front-end).
See the quick start guide that explains that very well.
I am building a client/server app in Dart using Angular for the front-end and Shelf on the backend. When I do a pub build it generates the javascript for the Dart files as expected but is does not replace the dart references in my HTML files. So in my index.html I have the following script reference:
<script type="application/dart" src="main.dart"></script>
This makes my application not load correctly. If I manually change it to
<script src="main.dart.js"></script>
My application works as expected. My question is, is there a way to configure my pub build to do this automatically? Or are dart files references not supposed to be replaced with JS references? If so, how do I build a basic server?
I know this produces an error message in the browser console but never experienced any problems because of this.
I haven't used it myself yet but I think this transformer https://pub.dartlang.org/packages/dart_to_js_script_rewriter does what you want.
I created a new Phonegap 2.5 project from scratch, and I've been trying to load an external URL in it, but I keep getting input boxes popping up on startup before loading the actual URL. I first get a pop-up with the URL of the website, then in the input box it says "DeviceInfo","Device652321624". If I click Cancel, it pops up 2 more times before loading the website. On the website itself, it loads some relative URLs, but others cause the entire page to refresh and the input boxes to pop up again.
I set the URL by setting <content src="http://phonegap.example.com" />, which is just a regular website with Javascript. I even tried commenting out all Phonegap specific code (no more ondeviceready calls), but it still causes the problem. http://www.google.com loads for me, so I'm not sure what else to check. And it works with the Android version that I've developed.
If it helps, I've also seen this message in the XCode log: Resetting plugins due to page load.
I've had the exact same problem today.
I fixed it by checking the include of the cordova.js file (this js is generated when you create the project using the create command.
( called cordova.js in the renamed cordova project version. probably phonegap.js in phonegap ?)
anyway my include was :
<script type="text/javascript" src="js/cordova.js"></script>
whereas je js file was in the project root :
I changed it to
<script type="text/javascript" src="cordova.js"></script>
and every things is fine now.
also, the 'create' command for Android generate a different js file. make sur that the new one generated for ios is used.
hope that helps !
Problem is you are using android's cordova.js instead of ios's cordova.js.
Just make sure you are using the proper one.
Already found this page with some helpful hints.
Problem is I need to debug a web application on a CMS using an iPad and Safari.
So far I haven't been able to make firebug-lite work. I am working in a secured environment having no internet acces, but can copy files using a USB-key.
I have copied firebug-lite.js to the local server and included the file in a script tag in the head:
<script type="text/javascript" src="http://my_server/js/firebug-lite.js"></script>
Unfortunatly when I open the page in the CMS I cannot see the firebug-lite-button on the page. Verifying the source code firebug-lite should have been loaded on the page. There is no way to get a right click menu to inspect anything.
What can I do to make firebug-lite work on the iPad? What am I doing wrong?
Start Firebug Lite already opened, as per http://getfirebug.com/firebuglite#Options :
<script type="text/javascript" src="proto://path/to/firebug-lite.js#startOpened=true"></script>
I think you won't be able to inspect elements, but you can navigate to the elements in the DOM tree provided by Firebug Lite.
It looks like Firebug-lite has problems with the iPad browser since late 2010.
The problem (ticket on official tracker) has not been yet solved.
Have you tested the problematic page in Safari/Chrome/Chromium for desktop? Since they use Webkit, the same system used with mobile Safari/Chrome, you may be able to duplicate the error and find its solution. You can open Chrome's debugger with right click, Inspect element.