I am writing a chrome extension that dynamically writes some html pages and their resources to the file system. I have most things working but I just noticed that when I try to open one of the pages by navigating to the filesystem:chrome-extension://... url that I obtain via the fileentry.getURL() method, the page opens, but chrome does not fetch any of the associated resources: stylesheets, images etc. Any ideas why this might be? Are there some security flags I need to get this working? I am i going about this all wrong?
(One thing that may be relevant is that the resources are identified by relative urls. But I know they are correct relative to the file because if i manually resolve them and browse to the URLs I can fetch them.)
The page you include that uses the relative URLs doesn't understand the HTML5 filesystem's mapping. If you change the URLs to point to what the fileentry.getURL() calls give you, then this should work.
There's currently a bug that allows relative URLs in resources to be used like you're trying to do: http://crbug.com/89271
Related
I have a kentico install with multiple sites, all 'should' be set up the same but having a weird issue with the 3rd site i just launched. Any sort of file (image, script, or css) won't load by its relative path, and if i try to open the url i am presented with a kentico login screen.
The truly weird part is if i put the same url path but put one of the other sites domains in front of it, the image loads fine.
newsite.com/imageURL <- wont load
othersite.com/imageURL <- loads
otheroldsite.com/imageURL <- loads
hopefully that makes sense, i've never seen anything like this before.
Start with CSS first, make sure you've enabled the css for your new site:
CSS stylesheets\YourCSSName\Sites
For the media library you must have permissions
Media libraries\YourMediaLibraryName\Security
Make sure that 'See library Content' is set for All Users
But scripts usually in ~/CMSScripts/Custom/ so any site in you case should be able to access them. If your script is there and you can't load it - it's not Kentico permission issue.
In Chrome Dev Tools you can edit and make persistent changes to style elements.
https://developer.chrome.com/devtools/docs/workspaces
You can also edit any HTML from any site and preview it live, sort of editing any site including ones you don't own or have access to.
However, I want to persistently, for me at least, edit the HTML, not just the style elements. How can I do this?
More specifically, I want to change the URLs of the static resources as if they're on a CDN.
Now:
Request: http://www.targetsite.tld/
<html>
<img src="http://www.targetsite.tld/image1.jpg">
</html>
Goal:
Request: http://www.targetsite.tld/
<html>
<img src="http://testcdn.tld/targetsite.tld/image1.jpg">
</html>
Hosts file editing won't work as the initial request will then not resolve to the right server. I really want to load the document from the existing server, not save the entire source off somewhere, then edit that.
I've found this nodejs script but remain hopeful I could achieve something more simply on the client side within the browser.
http://www.deanmao.com/2012/08/28/modify-a-site-you-dont-own/
I probably need some kind of browser extension that allows me to tag certain dom element nodes, write some rewrites for them, save this profile and then reload the page.
Does something like this exist?
The answer is User Scripts. In particular, GreaseMonkey for FireFox and TamperMonkey for Chrome. These are browser add-ons/extensions which allow you to manipulate DOM elements on the pages you visit, using simple JavaScript to achieve your goals.
This route, I achieved my goal with one caveat:
The browser first parses the original HTML and hence then makes all the HTTP requests for the assets it finds on the original source page. Only then does the User Script manipulate the content. Any edits you make on-the-fly with your user script then gets loaded after the the original HTML. So in my case:
<img src="http://www.targetsite.tld/image1.jpg">
The original image gets requested from the original host. Then my user script in TamperMonkey manipulates the URLs, causing the browser to than also request my new img:
<img src="http://testcdn.tld/targetsite.tld/image1.jpg">
In other words, it doesn't so much replace the image, it duplicates the request, altering the second one. This, of course, has implications for performance measurements etc. So beware.
When I upload my website files to my server and goto my website, i see the index.html at the url bar of the browser. How can I hide this?
http://bakpinar.com/about/about-us.html
I would like it to look like in this example;
http://www.royaltyline.com
as you can see, you only see the website address in the url bar of the browser. And when you click to another page, it doesnt show the .php, .asp or .html extension, just shows the folder name.
To hide the extension shown in the address bar, you have two options.
If you control the server, you can define rules that rewrite the URL based on the one the user is trying to get to. In PHP you can use the .htaccess file to define mod_rewrite rules. For similar features to .htaccess you can install the application request routing module in IIS 7 and above. In IIS (Windows) you can set up default pages that come up when users go to particular sites.
You can also make that all of your pages are accessed through the same page using AJAX, or put all the content on the same page and hide it using CSS and display it with CSS and/or JS.
This is a very high level answer, because the specifics vary greatly from situation to situation.
An easy way to do this, in case someone is still looking, is to use a full-screen iFrame. No matter where on the page your users are, they will always only see the main url. This used to be very popular back in the day, but it was a terrible practise in terms of usability.
<html><head>the stuff</head><body>
<iframe src="http://bakpinar.com/about/about-us.html" width=100% height=100%></iframe></body></html>
Write that into the index.html file at http://www.royaltyline.com
Yes, you can do by javascript.
<script>
window.history.replaceState('','','/');
</script>
It's not actually a folder name. It's rewritten URL.
To do such things you should redirect all requests to one file (index.php for example), then parse URL and basing on its parts, show particular file.
To redirect everything to index.php, use mod_rewrite module of Apache + .htaccess file.
To choose specific file you can implement one of several approaches. It's usually called routing in design patterns.
Completely other approach would be to use AJAX for reloading content. But it's not the way it was made on the website you gave as example.
In general there is a lot of information about routing urls in PHP on the web. Just do some research.
You are effectively looking to rewrite URLs. If your web server is Apache you will be able to use the rewriting module (mod_rewrite) to direct requests to http://bakpinar.com/about/ to http://bakpinar.com/about/about-us.html
If you are not running Apache, most web servers will serve index.html as the default page when requesting a directory, so renaming
about-us.html
to
index.html
and changing incoming links to
/about/about-us.html
to simply
/about/
Will give you the same results.
So, currently I'm making a website. It's an assignment. And when I tried to open it on different computer, it didn't work.
So, for example: "a href="file:///E:/assignment/main page/index.html#"
It did work on my computer, but it won't work on another. I need it to work at any computer.
There are two halves to your question:
How do I make my website accessible anywhere?
You need a web server, or you need to use a hosting company. GoDaddy, 1and1, HostGator, and other hosting companies have computers (web servers) that are configured to show their webpages to anyone in the world. They cost around $10 per month, and you end up with the ability to create links such as http://example.com/myproject/index.html
It's possible that your professor will let you put your web pages on one of his drives that are accessible anywhere on campus. Otherwise, a flash drive can do in a pinch. Put the files onto a flash drive and then bring the flash drive to class.
Is there a better way to write links?
Most websites use relative URLs in their links. For example, Stack Overflow, instead of writing every link as http://stackoverflow.com/whatever, will usually use a relative URL instead: /whatever.
There are a few simple rules that your browser follows when turning an href tag into a web address (in this example, we're starting from this page: http://stackoverflow.com/questions/15078748/how-to-make-working-path-in-html#15078792)
If the link starts with http:// (or anything else that comes before
a ://), then your browser will take you exactly there. For example:
http://stackoverflow.com takes you to the Stack Overflow home page.
If the link starts with /, then the browser will take you out of
any subfolders before executing the rest of the link. For example:
/election will take you here: http://stackoverflow.com/election
If the link starts with ../, then it will send you exactly one folder
up. This can be done multiple times. For example. ../ will send you
here: http://stackoverflow.com/questions/ .
If the link starts with a
question mark, ampersand, or hash tag, (?, &, #) then it will usually append
this to whatever page you are currently on. #example would take you
to
http://stackoverflow.com/questions/15078748/how-to-make-working-path-in-html#example
.
Finally, the browser will keep you in your current folder, then
send you to that link, for example: example will send you here:
http://stackoverflow.com/questions/15078748/example
You must use relative paths not absolute paths.
In simple words, you have to write:
...
to link to index.html a page which is in the same directory as your file index.html;
examples:
./my_page.html
use the "./" for linking pages in the same directory;
if the source and dest pages are in different folders, you shall use:
../my_page.html
or
./folder_path/my_page.html
according to the relative paths of the pages.
I am trying to create a "smart" web browser to load local images. Basically it works as a GUI for an application. I am using QTWebKit to power the browser, the problem is that the images of a given page can be found in different places, some are local files, others are in different resource files.
For example:
an HTML node to load image x.jpg can look like <img src="x.jpg"> and for image y.gif on the same page it can be <img src="y.gif">, now x.jpg is a local file that can be either in the root directory or in some other place. y.gif on the other hand can be in a resource file.
I want the web browser first to set the paths to all possible sources and once the page has been loaded or preferably while the page is loading searches for the images and loads them from their original path.
I considered the option of reading the HTML data first, parse it and search for the resources one by one, then edit the html to include the full path of the image but that would take a long time than what I want and it isn't practical.
Can any one put me on the right direction or does any one have any ideas on how such a design can be implemented.
EDIT: I have manage to delegate the requests by overriding the QNetwrokAccessManager and QNetwrokReply and been able to get the path to the image. The only problem is loading the image into view. I am currently using QHttp to handle the incoming requests but so far I haven't been able to load the image.
been trying to use QHttp's Get() function and passing the path to the jpg image as (file:///path/to/image) and also tried using the local path but nothing is working.
Take a look at How to tell QWebPage not to load specific type of resources?
You need the same approach but instead of dropping request by constructing QNetworkRequest with empty QUrl you need to pass url to the file on the disk.