Teach you how to develop chrome extension 2: Add behavior for HTML

1. Teach you how to develop chrome extension 1: Developing chrome extenstion is actually very simple
2. Teach you how to develop chrome extension 2: Add behavior for HTML
3. How to Develop chrome extension 3: about local storage data

In the previous section, we have talked about the basic knowledge of chrome extension and constructed the basic HTML. In this section, we will add scripts to the HTML Dom, that is, the operations performed by the script on our popup page and the changes on the page.

Under normal circumstances, data processing and loading are completed, and the data is read from the local data.

Click "Add new item". The input box is displayed. Enter the text and press enter to submit the data:

After adding the content, store the data and add the DOM element:

To simplify the processing of the function, click the task marked as completed and the message "delete or reset to unfinished" is displayed ":

The above functions are the core functions and can be expanded on this basis, such as task grouping, task modification, task reminder, and network synchronization data.

Start the script content.

To avoid global variables, all event processing and data binding are performed in this function using anonymous functions, and functions similar to $ () in jquery are defined:

 
(Function () {var $ = function (ID) {return document. getelementbyid (ID );}})();
 

Create a tasks object, define the show () and hide () functions, and store several common DOM objects.

VaR tasks = {Show: function (OBJ) {obj. classname = ''; return this;}, hide: function (OBJ) {obj. classname = 'hide '; return this;}, // store Dom $ additemdiv: $ ('additemdiv'), $ additeminput: $ ('additeminput'), $ txttasktitle: $ ('txttasktitle'), $ taskitemlist: $ ('taskitemlist ')}
 

The show () function and the hide () function both use chained calls. Each time you execute this function, the object itself will be returned, in this way, the object can use this function in the form similar to the jquery writing method.

Then register the event:

//..... // Initialize init: function () {/* Register event * // open the Add text box tasks. $ additemdiv. addeventlistener ('click', function () {tasks. show (tasks. $ additeminput ). hide (tasks. $ additemdiv); tasks. $ txttasktitle. focus () ;}, true); // press enter to add tasks. $ txttasktitle. addeventlistener ('keyup', function (EV) {var EV = EV | window. event; If (ev. keycode = 13) {// todo: write local data tasks. appendhtml (task); tasks. $ txttasktitle. value = ''; tasks. hide (tasks. $ additeminput ). show (tasks. $ additemdiv);} eV. preventdefault () ;}, true); // cancel tasks. $ txttasktitle. addeventlistener ('blur', function () {tasks. $ txttasktitle. value = ''; tasks. hide (tasks. $ additeminput ). show (tasks. $ additemdiv) ;}, true); // todo: Initialize data, load local data, generate HTML },//....
 

The part to be completed is the HTML5 local storage function that we will focus on in the next section. Define the data operation section, and write a blank function first:

 
//.... // Add: function () {// todo}, // modify EDIT: function () {// todo}, // Delete DEL: function () {// todo },//...
 

You also need to initialize this function so that it can be executed and anonymous functions can be executed:

(Function () {var tasks = {// ***} tasks. INIT ();})();
 

Okay, the following is allCode:

(Function () {var $ = function (ID) {return document. getelementbyid (ID);} var tasks = {Show: function (OBJ) {obj. classname = ''; return this;}, hide: function (OBJ) {obj. classname = 'hide '; return this;}, // store Dom $ additemdiv: $ ('additemdiv'), $ additeminput: $ ('additeminput'), $ txttasktitle: $ ('txttasktitle'), $ taskitemlist: $ ('taskitemlist'), // initialize init: function () {/* Register event * // open the Add text box tasks. $ additemdiv. addeventlistener ('click', function () {tasks. show (tasks. $ additeminput ). hide (tasks. $ additemdiv); tasks. $ txttasktitle. focus () ;}, true); // press enter to add tasks. $ txttasktitle. addeventlistener ('keyup', function (EV) {var EV = EV | window. event; If (ev. keycode = 13) {// todo: write local data tasks. appendhtml (tasks. $ txttasktitle. value); tasks. $ txttasktitle. value = ''; tasks. hide (tasks. $ additeminput ). show (tasks. $ additemdiv);} eV. preventdefault () ;}, true); // cancel tasks. $ txttasktitle. addeventlistener ('blur', function () {tasks. $ txttasktitle. value = ''; tasks. hide (tasks. $ additeminput ). show (tasks. $ additemdiv) ;}, true); // todo: Initialize data, load local data, generate HTML}, // Add: function () {// todo }, // modify EDIT: function () {// todo}, // Delete DEL: function () {// todo}, appendhtml: function (title) {var odiv = document. createelement ('div '); odiv. classname = 'taskitem '; var olabel = document. createelement ('label'); olabel. classname = 'on'; var ospan = document. createelement ('span '); ospan. classname = 'tasktitle'; var otext = document. createtextnode (title); ospan. appendchild (otext); odiv. appendchild (olabel); odiv. appendchild (ospan); // register the event odiv. addeventlistener ('click', function () {// todo}, true); tasks. $ taskitemlist. appendchild (odiv) ;}, removehtml: function () {// todo} tasks. init ();})();

the unimplemented part of the code will be described in detail in the next section.