I am trying to test a Chrome extension that searches bookmarks. Puppeteer loads Chromium with a clean profile each time, which is great, but my bookmarks are empty.
I was hoping to find a way to load a bookmarks file, so I don't have to use the Chrome API to manually create a bookmark tree under a testing flag in my code.
You can load an existing user data directory with all of its data, including bookmarks and browser settings:
puppeteer.launch({
userDataDir: '/path/to/user-data-directory',
})
The profile must be from a Chrome/Chromium version close to the puppeteer's Chromium.
Also — in my experience path shouldn't contain spaces on Windows.
Related
I can add a folder to the workspace (which doesn't seem to do anything, as far as I can tell), but the "map to file system resource" option seems to have been removed, and I can no longer live-edit css files.
Is this a bug, or has the process for mapping css files been changed?
This talk (https://developers.google.com/web/updates/2017/10/devtools-release-notes) says that the new version uses "magic" to map remote files to local ones, but I can't seem to get it to work at all.
For reference, I'm trying to map a reddit css file to one on my own computer. It worked fine on a previous version of Chrome (basically I add the folder, and map the css file inside it, which has been renamed to have the same name as the remote one) but not on the new one (Chrome 63)
I've just fiddled around with a problem, where only some files got mapped to my local workspace.
Turned out that Google Chrome also checks and compares the last modified date of your files.
If the file on the server has a more recent date than your local copy, this file won't be mapped.
I deleted the Bootstrap file on the server side and uploaded my local copy, which has an older last modified date. Google Chrome instantly mapped the file to my local workspace.
Out of curiosity I ran touch bootstrap.min.js on my server to set the last modified date to today. This broke my file mapping again.
Chrome removed manually mapping to filesystem resources because of the new Workspaces 2.0 (See: https://developers.google.com/web/updates/2017/10/devtools-release-notes).
You should be able to drag and drop your folder into the sources tab and it'll link the files automagically.
However automatic mapping doesn't work in many situations and there is a Chrome bug to re-add manual mapping
I had the same problem so I downgraded to Chrome 62 (preferences, history, extensions and so on are preserved).
Download Chrome 62 from
https://www.slimjet.com/chrome/google-chrome-old-version.php .
On OS X trash /Applications/Google Chrome.
Switch off auto-update by setting "defaults write com.google.Keystone.Agent alwaysPromptForUpdates 1". Default is 0.
May be you have to set "defaults write com.google.Keystone.Agent checkInterval 0" too. Default is 18000.
Install Chrome 62 as usual.
After starting Chrome 62 open "About Google Chrome". Chrome is checking for updates, but will prompt you to confirm.
The "Map to File System Resource..." menu item is missing. There appears to be no way to map files. It is completely broken as far as I can tell.
For me, the problem turned out to be the presence of the copyright symbol © in the file headers (which affected just about every file). With this character in the files, devtool refused to map the files but with it removed, the files map fine.
I'm also using Chrome 63.0.3239.132 (Official Build) (64-bit) and as I wanted to use the DevTools Live-edit to edit some js files I saw that the option "Map to file system resource" is missing.
After some research I have found out that the Live-edit is perfectly working in Version 63, you just have to:
go to Sources and then FileSystem
add the folder with your code to the workspace
After that, a small little green point will be displayed near your files (it means the synchronization is ready) and the changes via DevTools can be persisted locally:
Thanks to others in this thread saying chrome is checking the modified date.
Adding this to .htaccess solved it for me
IndexOptions SuppressLastModified
Of course you would not want this to get into your production code as it could stop browser caching working.
I cleared the cache and it works now.
Previously, I opened my CSS file from my FTP client, then I dragged the containing folder into the Sources tab > Filesystem tab (without caring about any folder names nor structure, I just dragged the FTP clients containing folder into it).
The persistent mapping worked straight away, edits from the Chrome Dev Tools were saving on the server. After 30 minutes of fiddling and playing around, it just stopped working and the CSS resource got greyed out. The file icon with the green dot was not appearing anymore.
It didn't matter what I'd do, it would not work, but when I cleared my cache, it started to work again.
File mapping started working reliably for me once I turned on a devtools setting -- click the upper-right gear icon and check Preferences > Network > "Disable cache (while DevTools is open)"
As of today, with Chrome Version 63.0.3239.108 (Official Build) (64-bit):
The feature appears to be still broken, not working 'automagically' nor consistently with the previous behavior.
However, adding a folder that reflects the resource's URL as seen in the Network tab, make it work again. So if for instance, in the Network Navigator tab you have:
http://mylocal.site/wp-content/themes/mytheme/assets/sass/partials/_header.scss
You will just need to add the whole wp-content/ folder to the Filesystem tab to get the feature work again as expected.
Had the same problem, but when my source maps included sourcesContent, the file mappings were automatically made and I could live edit my scss. Apparently chrome uses the content to find the right file.
node-sass --source-map-contents
How can I convert json formatted bookmarks file (taken from /Library/Application Support/Google/Chrome/Default/Bookmarks) into an bookmarks html file so Google Chrome can import it?
This has more or less been answered in comments by #Mr.P, but let me formalise:
In my example I have a current (OS root) drive called C:\\. I have a storage drive of F:\\ which has a previous install of Chrome on it which I want to retrieve the bookmarks from.
I did this in Powershell but you could easily do it in file explorer you would just need to either enter the path to <drive_name>:\\users\<account_name>\appdata manually/show hidden folders.
close all instances of Chrome currently running (maybe check in the process monitor to ensure all processes terminated).
navigate to <storage_drive_letter>:\\users\<account_name>\appdata\local\google\chrome\default.
On PowerShell you would select the previous install bookmarks file by entering $books = Get-Item bookmarks. On file explorer you would 'cut'
cd <os_drive_letter>:\\users\<account_name>\appdata\local\google\chrome\default or navigate to this path on file explorer
mv $books . or paste file
open up Chrome again and check the bookmarks: they should be visible all together.
[optional] If you're brave close all Chrome windows once again (potentially save both files somewhere else before you do this) delete all files with 'bookmarks' at the start (you can use gci | where {$_.name -like "bookmarks"} | rm) then reopen the browser. In your filesystem Chrome should have automatically regenerated the bookmarks into one file.
If this doesn't work for other people let me know
If for whatever reason, you only have the JSON output of the Chrome bookmarks file, don't sweat it. Chrome will export bookmarks as HTML and import as HTML. But, sometimes you don't have the luxury of exporting from Chrome because of some issue with your Windows installation. But, you're resourceful and managed to at least get access to your Windows filesystem and backed up your Chrome bookmarks file. But, now how do you import it to Chrome on a working computer without it being in HTML format?
On Windows (this was tested on Win 10), all you have to do is Show Hidden Files and Folders and then paste and overwrite the Bookmarks file at:
C:\Users\YourUserName\AppData\Local\Google\Chrome\User Data\Default
Don't run around in circles trying to convert JSON to HTML if you have a Windows computer. I'm not sure about Mac and Linux, but I'd bet it would work similarly.
Folder location of bookmark (on February 2021)
Chrome: %LOCALAPPDATA%\Google\Chrome\User Data\Default
Edge: %LOCALAPPDATA%\Microsoft\Edge\User Data\Default
Note: "Default" could be something else (e.g. Profile 1) if you are not currently logged in.
Finally i found it
Step 1: Goto Run --> enter - appdata to navigate to this folder
Step 2: You Needs to take backup/copy of your old bookmarks and keep it one place
Step 3 : then you need to navigate to below folder, you can find many profiles of yours.
Navigate to the needed gmail account profile which has your display pic or profile pic
[identify the account you want to import bookmarks]
Go back to the profile 12 [the account which i want to see the bookmarks]
Then replace your old bookmark file here[step 2:which you taken backup bookmark file]
Boooooom! just restart chrome
I think you are making this harder than it is. Save the JASON bookmark.file, first. Go to C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default to save the Bookmark.file somewhere on your computer. Then uninstall the browser (Chrome, for example). Make sure you check the box to remove all history, etc. before you click on Uninstall.
Reinstall the browser, then overwrite the Bookmark.file in C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default
DONE! Bookmarks restored. No need to save bookmark.file or convert it to an HTML file for restoral. Just overwrite the bookmark.file with the one you saved before uninstall of your browser.
If you're worried about modifying existing programs, or overwriting any other bookmarks you've currently got, then I found the following easiest:
Install a portable version of Chrome, for example from portableapps.com
Navigate to App\DefaultData\profile\Default inside the install directory
Replace the Bookmarks file with your json file
Launch Chrome Portable, and export the bookmarks as html
Delete Chrome Portable
I had same problem with opera. I simply copy pasted that json file into new location of new installation.
Just drag the .json to opened firefox window and the run bookmarklet
(create new bookmark, enter code in location)
CODE: SELECT ALL
javascript:(function(){var E=document.getElementsByTagName('PRE')[0],T=E.innerHTML,i=0,r1,r2;t=new Array();while(/("uri":"([^"]*)")/g.exec(T)){r1=RegExp.$1;r2=RegExp.$2;if(/^https?:/.exec(r2)){t[i++]='['+(i)+']:'+r2+'</a>';}}with(window.open().document){for(i=0;t[i];i++)write(t[i]+'');close();}})();
Thanks to dickvl
Clickable links result
Save webpage complete will save .htm
Save .json to desktop, drag browser window smaller from lower right edge till you can drag the .json into opened window., doubleclick titlebar to restore browser full size. In the tab that opens with .json data, click the bookmarklet. Another tab should open with links. You can save as .htm by right click "save page as" web page complete.
Anywhere in the opened window, like dragging a shortcut or html, it'll open
You can also do File > Open File > browse to .json > open
Using JSON
Backup your bookmarks as a JSON file.
Delete the bookmarks you do not want.
Export the ones you do want as an HTML file
Restore your bookmarks with the JSON file
To add mor in the JSON file in a text editor.
Create rows by finding and replacing ',{"title' with 'return{"title' (Don't type the single quotes and, in the replace field, use the appropriate substitute for return: ¶ or \r, for example. My search looked like this: Find: ,{"title Replace: \r,{"title Replace All gave me rows instead of a continuous stream of text.
Save the file as text and open it in a spreadsheet. Each bookmark will have its own row. The site name, URLs, and other data are in columns.
Create a bookmark by copying the URL, pasting it into Firefox, and going to the website.
Drag the URL from the toolbar to the desired location in the sidebar. Change the bookmark title if you don't like the website-assigned title.
Repeat as needed.
I am on Chrome Dev 27, and in the Dev Tools settings checked Disable cache. When I reload a page, Chrome properly reloads all the resources used by map page, including the .js files. However, it doesn't automatically reload the corresponding source maps .map. Monitoring the HTTP traffic between Chrome my app, on subsequent page load, I don't see any request from Chrome for the .map files. How can I get Chrome to also reload the source maps?
The issue with Chrome not reloading the .map file is that it also won't reload the file from which the .js was generated, which in my case happens to be a CoffeeScript file (.coffee), which means that when debugging, in the Sources tab I am looking at an old version of the .coffee file, even if the new code (from the .js) is running.
I had this same issue just today. The wait to solve it for me was to close the coffee file's tab under sources, go to the network tab, right click, and select "Clear Browser Cache"
This fixed it for me.
That said, the mapped files don't always get "stuck" in cache for me... Only sometimes, and when they do, the clear cache trick fixes it.
Just had the same issue and found some additional solutions:
According to this commit and this bug report for chromium, the problem is solved and should not affect one of the next builds.
A little bit simpler solution for this problem than clearing the whole Browser Cache:
Open the source map in a browser tab and do a hard reload (depending on OS, try CTRL+F5). This refreshes the file and keeps the browser cache.
An alternate way and perhaps a good practise is to hack the source map generation by adding a parameter like ?build=12345. Refer to your build tool on how to manipulte the filename of the source map.
If you have access to the server config or a .htaccess, you could set the header Cache-Control: no-cache for the source map extension like '.js.map'.
Go to settings -> Show advanced settings -> Clear Browsing Data -> Check only "cached images and files" -> Click "clear browsing data"
This will clear the source maps you have cached in the browser without deleting all the cookies.
I resolved the issue by deleting the .map file and performing a hard reload (CTRL-F5).
I didn't want to lose all my history!
When doing webkitRequestFileSystem in window.PERSISTENT option in Google Chrome, where on my filesystem do files get written? I'd like to drop files there and have Chrome interact with them while I'm building and debugging this app.
For me, at least on Mac OSX, they're stored under /Users/USERNAME/Library/Application Support/Google/Chrome/Default/File System for me. If you're using profiles, there will be profile directories instead of Default. However, each origin's saved files/folders are obfuscated under directories that won't be easy for you to interact with.
For debugging the Filesystem API, you have a few options:
Use this extension to view/remove files.
See the tips here: http://updates.html5rocks.com/2011/08/Debugging-the-Filesystem-API
That includes viewing stored files very easily using the filesystem: URLs.
Drop the Filesystem Playground demo (http://html5-demos.appspot.com/static/filesystem/filer.js/demos/index.html) into your origin. You can use that to view/rename/delete files/folders easily.
Chrome DevTools now has support for the Filesystem API for viewing the files stored under an origin. To use that, you will need to enable the Developer Tools experiments in about:flags, restart, hit the gear in the devtools (lower right corner), and enable the 'FileSystem inspection' under the experimental tab.
Just for completeness: on linux it goes into ~/.config/google-chrome/Default/File\ System/
On Windows XP, it is here: c:\Documents and Settings\USERNAME\Local Settings\Application Data\Google\Chrome\User Data\Default\File System\.
On Windows 7, the location is C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\File System.
It's not very useful to browse it because file and dir names are obfuscated (but content in files is unchanged).
As ebidel wrote the best way is using browser of filesystem: urls that incorporated into Chrome. It's excellent! You can get the url using fs.root.toURL() where fs is a FileSystem object that you get, for example, from window.webkitRequestFileSystem().
Seems like the filesystem storage is encoded to prevent exactly what was trying to do. I ended up writing a very simple file manager available here. Start up any web server (I like mongoose for its 0 setup) and go to the /filemanager.html route
I saved a file called log.txt on MAC
It ended up at
~/Library/Application\Support/Google/Chrome/Default/Storage/ext/panbljeniblfmcakpphmjmmnpcaibipi/def/File\ System/iso/p/00/
with file name 00000 and no ext
If you are using MAC OX, and you have more than one profile on your chrome, or you cannot find default in the path, replace default with profile. But depending on number of profiles you have, it could be profile 1, profile 2, etc
I'd like to be able to take a screenshot of a page and give the user the option to save it to their desktop (with a standard OS file save prompt). Is this possible from the Chrome Extension environment? I'm not worried about the image side, more the saving to the user file system.
I've looked at the following pages (among others):
Making a Chrome Extension download a file
http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-support
Take a look at this HTML5Rocks update: http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
Here's a demo of this in action: http://eligrey.com/demos/FileSaver.js/