Here at MDN, I found out that if I want to load data like images, custom HTML views or videos, I have to store them in top-level project folder called data.
However, that completely breaks my project skeleton.
My goal is to create a "homepage" for my extension that would open whenever a user clicks my extension's toolbar icon. My "homepage" document is currently stored in data/view/main.html. Is there any way to make Firefox accept locations like src/view/main.html?
Related
I simply want to create a link with default (?) browser window popup which gives user an option to open or download a pdf document stored in application.
Something like this :
I have a "documents" folder in src which contains "example.pdf" file.
And a simple link like this :
<Link
href={require('src/documents/example.pdf')}
download='example.pdf'
>
Example file
</Link>
Attribute "download" will force browser to directly download a file, or i can add target="blank" in order to view directly in browser, and both solutions works, but i want user to decide if he wants to open a file in browser or download it as in image above.
I know there is a Content-Disposition atrribute, but as far as i understand its for serwer side in order to create a header ? Its possible to use it in front-end side like jsx/html attribute (prop) ?
What is the simplest solution to achieve this ?
The simple answer is, sadly, you can't manipulate the native browser handling in this way. Each browser has different behaviour, and this is a UX choice from the browser vendor that can not be overridden. In chrome for example, the "run" button only shows if its an executable.
I'd suggest implementing it in userland, i.e. a modal in your react application with 2 links to download or view in browser.
I have a task where in we have specific data of an element open in a webpage and there are multiple elements data opened in multiple pages. The data I need is located at a same location in each webpage. I need to copy the entire row of that data and as sson as I flip the tab by Ctrl + tab the next data of next element should be copied too and in the end I need to export them in an excel file.
I would appreciate if someone can tell me how do I go about it.
I want this to be done as a browser extension.
You can enable a Chrome extension allowing you to execute any Javascript of your own on any website.
For example this extension "Custom JavaScript for websites" : https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija
You Copy/paste in the textarea of this extension your Javascript such as mydata = $("#element_i_want_to_copy").text(); console.log(mydata);
You can then retrieve in Chrome console the data...
If you want that the Javascript on every page send the data on a page of your own that will centralize automatically all the data sent by each Chrome tab loaded page, then you can use online (free) services like "Pusher", cf https://pusher.com/.
The Chrome extension "pushes" the data on your html page, that "receives" the message and displays it in a textarea for instance or a html of your choice...
I want to use Brackets to view my HTML, JS, and CSS files I've written. However whenever I open a file from my folder "Code", Google Chrome Opens up an index of my desktop folders, then I have to click the folder "code" and go in the folder to click on it. How can I make it to where when I click on "live preview" Chrome loads the actual HTML file instead of traveling the world first?
Here is a picture of what's going on:
http://imgur.com/a/zLTo5
Referencing your image, Julie/Desktop is your root.
So, here is what I would do.
Lets say Code2 is the folder that contains all your code for the site you are building. In this case, you would open Brackets and select file > open folder and then navigate to the Code2 folder and open it. This sets Code2 as the root directory for Brackets. Now, in that folder, make sure that you have an index.html file - preferrably the one that you are working on. Now clicking the view button should open the actual page in your browser.
If you dont have an index file, and want to load a different file then just toss a blank index file in the root, click the view button and a blank page should open in the browser. Now just change the path to include the proper name of your file and it should load the page you wish to edit. Saving should reload it in browser.
Example. If your index path is http://127.0.0.1:52497/index.html but you want to view a page with the filename of page2.html, then you would change the path to: http://127.0.0.1:52497/page2.html
Whatever directory you have imported into Brackets needs to have an index.html file. You dont have an index file in that root from what I can tell - so it has no idea what you want to load when you click the open in browser button.
So, I've looked through the WebExtensions API, but I haven't been able to figure out how to open an HTML page separate from about:addons for options. In the Add-on SDK you could have resource://ext-id-/path/to/file.html. I've tried making a directory web accessible and putting an HTML file in there, but that didn't seem to work.
Does anyone know how I can open the options HTML file in it's own tab with WebExtensions?
Opening a tab
Options page always in a tab:
If you want your options page to always open in a tab, you can add the property open_in_tab with a value of true to the options_ui key in your manifest.json:
"options_ui" : {
"page": "options.html",
"open_in_tab":true
}
This will result in your options page always opening in a tab. Both clicking on your extension's "Options" from within about:addons and using runtime.openOptionsPage() will result in your options page opening in a tab.
Thanks to BigBlutHat for reminding me of this option.
In a tab when normally your options page is within about:addons:
You can open a new tab with whatever URL from within your extension you desire, including your options page, using tabs.create and runtime.getURL. Specifically for an options.html file located in the same directory as your manifest.json, the following works:
chrome.tabs.create({
url: chrome.runtime.getURL('/options.html')
});
Does not need to be web accessible and loading JavaScript:
You do not need the files to be declared as web accessible. The page runs in the background context so JavaScript is loaded by directly including the files in the src of a <script> tag (e.g. <script src="/options.js">). This is the same as you would do for a popup. This answer has an extension that uses the same HTML and JavaScript as both a popup and an options page. It does not, however, actually show opening that page as a tab, but it could be done with the above code.
Resolving Relative URLs:
Both Chrome and Firefox state:
Relative URLs will be relative to the current page within the extension.
Note: For all the different chrome.* API calls, Chrome and Firefox do not always resolve relative URLs in the same way. For example, it is different in each browser for chrome.executeScript().
For example, I opened a document named "Doc1" from my drive. If I rename it to "Doc2" from the drive explorer, the opened document in the other tab gets reloaded and changes it's name. I want to know exactly how google does this? I learnt somewhere that it uses Html5 storage for this.
You can definitely implement this using HTML5 localStorage. Whenever the script in any of the open tabs adds or changes an item stored there, the other tabs receive a "storage" (or "onstorage" for IE) event.
If you give each document a unique identifier, and store a dictionary mapping identifier->filename for all open files, you can change those names from any tab. Or you can simply store an array of files that need updating, and have the tabs reload themselves (including their updated "filename") from the server.