Create-React-App Chrome Extension - Have a second HTML and JS file? - javascript

I have a Chrome extension created via create-react-app that injects content a webpage.
The extension's popup window is created with React using the index.html file in the public folder and the index.js file in the src folder by default.
I currently have another HTML file in the public folder that gets injected into the webpage via an iframe in the content script.
I want this HTML file (inject.html) to be created with React, rather than just vanilla HTML + JS.
I can't figure out how to do this, as I can't seem to get the HTML file in the public folder to use the React js file in the src folder to render it's content.
Is this possible? And if how how can I achieve this?
From searching around, people are suggesting ejecting and editing webpack somehow to maybe achieve this?
Or maybe reusing the index.html and doing a check in the index.js of which content to render? (Although this feels a bit hacky to me).

Related

How to integrate images on CDN with JS on CDN

I've moved all my CSS and JS to the Cloudinary CDN and everything works except where the JS files need to grab an image.
I've got a index.html file thats pulling the JS and CSS from the CDN without issue but when JS goes looking for any image I get an error saying the resources is missing.
On the CDN I've created a few folders for CSS, JS and images and used root paths in JS as normal, example: "./sprites/img1.png".
When I have this folder/img in the same directory as the local HTML file it works fine.
If I move that folder to the CDN it cant find the resource.
Looks like once the JS is served to the local file it also expects local resources.
Is there anything I can do to prevent this besides placing the HTML file on the CDN as well. Cloudinary doesnt allow HTML to be served to the browser you see.
Thanks for any help and if you need further info dont hesitate to ask.
Found the issue.
The paths in external JS files are relative to the Page they are included in (in this case the index.html page), not the actual location of the file.
Thats why it was searching the local directory and not the CDN.
Solution comes from another Stack Overflow question:
Relative Paths in Javascript in an external file

Apache2 not serving javascript/css when using CGI.pm perl script to render web page

I am working on a college assignment which requires me to stick with perl and cgi.pm to render webpages.
With my current implementation I have included a javascript cdn for a javascript library (p5js) and another script tag that points to a js file present in the cgi-bin folder.
All the html content seems to be working fine, but I keep getting a 404 error saying that the files can't be found, despite it being there
The webpage works fine when executed as a regular html page.
If the cgi-bin directory is not the expected location, please let me know where to place the js files as well as how to point to them using a the script tag
From the browser view the js files are static content so apache try to get it from the DocumentRoot. Put it there or better make a directory DocumentRoot/js an locate all js files there. The path part of the URL looks then like /js/p5.js

Tracing page loading in Apache

So, I am copying a file hierarchy from a hosted application to my local machine. The hierarchy absurd, and after copying the http.conf file, the page loads, but not the JavaScript. It can't find the location.
Apparently there is some mechanism that overrides the DocumentRoot, like some sort of ad hoc routing.
I can't even find an .htacces file.
Is there anything in Apache that can suppress or alter the directives in http.conf?
Fixed this. In my case, the application was meant to load a custom filetype, but instead was loading the default .html because there was an index.html in the directory. Once I deleted the empty index.html the index.custom file loads.

when i copy my html file in jsp and css file then my page design change

I am working on a project.Initially I worked in dreamweaver and created some html files and css for project interface. when i run index.html , in case of single folder contain all html files and css it run well no change in design and every div in its proper place and everything is well but now i am using neatbean and tomcat to run my project in java so for this purpose when i copy my html file code in jsp along with css and after deployment when i run index.jsp its design got changed and everything is mixed with each other for example menu and header mixed with each other and my page design corrupted. some one tell me how i can fix it.
Maybe is because you open a new file for the project, and copy the code of the html,css directly, if you have open a new project in netbeans for example the default folder of that project is in C:\Users\nameuser\Documents\NetBeansProjects if this is the case, just change the project folder to the html one

Why isn't my javascript working on a local HTML file using UIWebView loadRequest:?

I have a script that generates a temporary HTML file that has links to external Javascript files that it requires to run.
<script src="file:///Users/raphaeldefranco/Library/Application Support/iPhone Simulator/User/Applications/BA9E724E-76BD-4F28-B224-54B4C73786D6/LogTen.app/Reports/Time by Year/../../Tools/PlotKit/Base.js" type="text/javascript"></script>
The links are absolute and they are to the right place (There is a CSS link as well that uses the same method and it works fine). I've been using the following, which finds images and CSS just fine but for some reason won't run the .js.
[webView loadRequest:requestObj];
I've tried changing the encoding of the files. I had a problem getting the CSS to work until the file was in unicode, but so far no luck. All the Script files are bundled with my project etc.
Thanks in advance!
You can't access things outside the application bundle directory. Just copy them in and access them without the path. They will be in a different location anyway when installed on the device.

Categories

Resources