Scrapbook is a firefox plugin which allows you to save part of a web page or a complete web page. This is like bookmarking urls in the firefox browser. Difference in scrapbook is that you can highlight,edit,delete,comment web page content according to your requirement and save only the parts that you are interested in using the special features provided by the addon. This is an essential tool for web developers,designers and students because you can save only the important parts from other web sites to view later.

You can download Scrapbook from https://addons.mozilla.org/en-US/firefox/addon/scrapbook/. Once downloaded install and restart the browser. More details about installing and configuring firefox addon can be viewed at https://innovativephp.com/blog/2011/05/09/how-to-manually-install-a-firefox-add-on-using-xpi-file

Once downloaded you can see the scrapbook icon at the status bar on the bottom your web browser. Once you click it a menu will open and then you can use the functionality on the web page content currently on the browser screen.

 

Scrapbook Menus and Functions

 

1. Highlight Menu
2. Attachment Menu
3. Clear and Remove Menu
4. Dom Eraser
5. Undo
6. Save

 

In the following section i am going to explain how to use these features in the scrapbook menus.

Step 1 – Click the scrapbook icon on the bottom and click edit before save option in the menu given.

 

 

Step 2 – Scrapbook tool bar will appear above the status bar as shown in the next screenshot.

 

 

Step 3 – Select any part of text or other content on the web page you are viewing and click the first item in the tool bar as shown in next screen. Select any type of highlighting option from the menu like next screen.

 

 

Step 4 – The content or text you selected will be highlighted according to your selection as shown in the next screen.

 

 

Step 5 – Once you click the save button all the highlights will be saved with the web page. More details are provided in Save section.

Step 1 – Get the Scrapbook toolbar by clicking the icon in the bottom. The icon after the highlight menu contains the attachment menu.

Step 2 – You can add and attach a link url to selected content in the web page. So you can add related links to important parts in the current web page for future reference.

 

Step 3 – Select text from the web page and click “attach link to selection” from the attachment menu as shown in the screen below.

 

 

Step 4 – Once you click the attach link to selection option popup box will appear as shown in next screen. Add the url you want to refer to current selection and Click ok. You can add external links by giving complete url in the popup box and it will refer to the external web site (Ex. www.google.com will point to the google site). Internal links can be added by giving the part of url in popup box and it will refer to internal page. (Ex. Blog will point to www.currentsite.com/Blog).

 

 

Step 5 – Then a link is created for the selected text. Its important to make sure that you select the content inside single html tag. Scrapbook cant attach urls if the selected text is inside two separate html tags. You can inspect this using the firebug addon.

Step 6 – Now you can save the document and all the attached links will be shown in respective texts next time you view it.

Step 1 – You can create sticky annotations using the Create Sticky Annotation option in the attachment menu. Once you click on menu item popup will appear as shown in the following screen.

 

 

Step 2 – Add any note you want to remember and click save button. Whenever you view the saved web page again it will show popup boxes with the given notes as shown in next screen.

 

 

Step 1 – You can add inline note for selected text using the Add Inline Annotation option in the attachment menu. Once you click on the option popup box will show up and you have enter the note and click ok. Example screenshot is shown below.

 

 

Step 2 – Once you save the inline annotation you will be able to see the note when you move the mouse over the selected text as shown in screen below.

 

 

You can view the remove menu using the 3rd icon in the tool bar. There are 4 important functionality that ill go through in the next section.

 

Remove iframe tags – This option will remove all the iframe tags and its content in the given web page.

Clear All Highlights – This option will clear all the custom highlighted text in the whole web page.

Clear Highlights in the Selection – This option will clear all the custom highlighted text in the selected area.

Remove the Selection – This option removes all the selections in the web page and gives the default layout.

 

 

DOM Eraser can be activated using the 4th icon in the toolbar. This feature can be used to remove the unwanted html tags and contents from the current web page.

 

Step 1 – Click the DOM Eraser icon from the toolbar and move the mouse around the page. You will see that html tags will get highlighted with red color border as shown in the next screen.

 

 

Step 2 – Click on one of the highlighted elements and it will get removed from the page. You can keep continuing the process until you remove all the unwanted elements from the page.

 

 

Step 3 – Once you are done with removing elements you can save the remaining content using the save button.

Once you are done with all the highlighting and selecting text you can click the save button and web page will be saved in the scrapbook menu in top menubar as shown in next example. You can also select the text from the page right click and save the contents using “Save Selection” or “Save Selection as” options. Links can be saved by right clicking and using the “Save Link” or “Save Link as” options.

1. Bookmarking web pages – This is equal to firefox default bookmarking behavior.
2. Saving Code Snippets – You can select only the code section and save using right click or bottom menu.
3. Saving Important Notes and Links on Web Pages.
4. Learn Layout Designing – If you find a well designed web page and want to learn how to design it, you can remove the unwanted parts using DOM Eraser and save the remaining page and view the code.