Introduction to Scrapbook Addon
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 http://www.innovativephp.com/blog/2011/05/09/how-to-manually-install-a-firefox-add-on-using-xpi-file
How to use Scrapbook Functions and Menus
Scrapbook Menus and Functions
1. Highlight Menu
2. Attachment Menu
3. Clear and Remove Menu
4. Dom Eraser
In the following section i am going to explain how to use these features in the scrapbook menus.
Highlight Selected Web Page Text with Highlight Menu
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.
Create Internal and External Attachments with Attachment Menu
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.
Create Sticky Annotations with Attachment Menu
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.
Add Inline Annotation
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.
Clear Selections and Highlighting with Remove Menu
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.
How to use DOM Eraser to Remove Clicked Elements
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.
Bookmark Modified Web Page using Save Button
Practical Examples for using Scrapbook Addon
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.