23 Οκτωβρίου 2013 στις 01:21 μ.μ. Δημιουργήστε τη δική σας επέκταση για το Google Chrome

• Ανάπτυξη ιστοσελίδων,
• JavaScript,
• Google Chrome

• Φροντιστήριο

Υπάρχουν ήδη αρκετά άρθρα στο Habré σχετικά με τη δημιουργία επεκτάσεων για το Chrome. Θα μοιραστώ την εμπειρία μου, αγγίζοντας τα κύρια πράγματα και τα μέρη στα οποία είχα δυσκολίες.
Τι χρειάζεστε για να δημιουργήσετε μια επέκταση με λίγα λόγια:
1) Βασικές γνώσεις Javascript
2) Βασικές γνώσεις HTML
3) 5$

Θα σας δείξω πώς να δημιουργήσετε μια επέκταση για το Chrome χρησιμοποιώντας το δικό μου παράδειγμα, που δημιουργήθηκε για τον υπολογισμό του "χαμένου χρόνου" στο Διαδίκτυο. Δηλαδή, αυτή η επέκταση μετράει τον χρόνο που αφιερώνεται σε ιστότοπους με τη δυνατότητα να προσδιορίζει τους ιστότοπους που επισκέπτονται κατά κατηγορία: χρήσιμος χρόνος ή χαμένος χρόνος.

Ξεκινάω λοιπόν τη δημιουργία της επέκτασης δημιουργώντας έναν φάκελο για την ίδια την επέκταση, στον οποίο θα βάλουμε όλα τα αρχεία που δημιουργούμε. Θα το ονομάσω "χαμένος χρόνος". Στη συνέχεια, δημιουργώ ένα αρχείο manifest.json, που μοιάζει με αυτό:

manifest.json
( "manifest_version": 2, "name": "Lost Time", "version": "1.0", "icons": ( "128": ""), "content_scripts": [ ( "ταιριάζουν": [ "* ://*/*" ], "js": [ "content.js" ] ) ], "background": ( "scripts": ["background.js"]), "permissions": [ "http:/ /losttime.su/*" ], "browser_action": ( "default_title": "LostTime", "default_icon": "", "default_popup": "popup.html" ) )

Μερικές από τις γραμμές θα πρέπει να είναι διαισθητικές, αλλά εδώ είναι τι πρέπει να γνωρίζετε:
- Η τιμή manifest_version πρέπει να είναι "2".
- Στο content_scripts γράφουμε ποιο σενάριο θα εκτελεστεί σε όλες τις σελίδες ξεχωριστά.
- Στο παρασκήνιο γράφουμε ένα γενικό σενάριο (σενάριο φόντου), το οποίο εκτελείται κατά την εκκίνηση του προγράμματος περιήγησης.
- Στα δικαιώματα γράφουμε τη διεύθυνση του ιστότοπου από τον οποίο θα ληφθούν οι πληροφορίες.

Ό,τι θα χρησιμοποιήσω δεν χρειάζεται να χρησιμοποιηθεί από εσάς, αν λογικά απλά δεν το χρειάζεστε. .

Το ίδιο παράθυρο που μπορείτε να δείτε κάνοντας κλικ στο εικονίδιο της επέκτασης είναι η σελίδα: popup.html.

Μου φαίνεται έτσι:

αναδυόμενο παράθυρο.html
Χαμένος Χρόνος

Για να γίνει πιο σαφές, έβαλα μια περιγραφή του κώδικα στο ίδιο το HTML. Οργανώνω το μενού απλά: Βάζω έναν εσωτερικό σύνδεσμο επέκτασης στην εικόνα.

Από τότε που ξεκίνησα το popup.html, θα σας μιλήσω για το popup.js αμέσως

Μου φαίνεται πολύ απλό:

popup.js
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], true); // εδώ υπάρχει ένα αίτημα GET προς την καθορισμένη σελίδα xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // αν όλα πήγαν καλά, εκτελέστε ό,τι βρίσκεται σε αγκύλες ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // προσθέστε τον κωδικό που λάβατε στο μπλοκ με id=dannie ) ) xhr.send();

Περιέλαβα επίσης μια περιγραφή του κώδικα.

Είναι το σχέδιο που περιγράφεται παραπάνω που σας επιτρέπει να βγάλετε και να εμφανίσετε περιεχόμενο από τον ιστότοπό σας ή ίσως όχι από τον ιστότοπό σας. Αλλά τι είναι σημαντικό να γνωρίζετε:
- Στο αρχείο δήλωσης, φροντίστε να γράψετε στο πεδίο αδειών τη διεύθυνση του ιστότοπου από τον οποίο θα ληφθούν οι πληροφορίες.
- Το αρχείο popup.js συνδέεται με το σενάριο φόντου background.js, επειδή Τα δεδομένα που εισάγονται στην τοπική αποθήκευση στο background.js είναι επίσης ορατά στο popup.js.

Πριν εξετάσουμε το αρχείο σεναρίου φόντου background.js, ας δούμε το αρχείο σεναρίου που εκτελείται σε κάθε σελίδα ξεχωριστά: content.js

Για μένα μοιάζει με αυτό:

περιεχόμενο.js
λειτουργία onBlur() ( // το παράθυρο χάνει την εστίαση chrome.runtime.sendMessage((site:sait,time:localStorage)); // στέλνει ένα μήνυμα στο background.js localStorage = "0"; ) window.onblur = onBlur; // εάν το παράθυρο χάσει τη συνάρτηση εστίασης sec() // εκτελείται κάθε δευτερόλεπτο ( if(document.webkitVisibilityState == "visible") // εάν η σελίδα είναι ενεργή ( localStorage = parseInt(localStorage,10) +1; // ενημέρωση δεδομένα τοποθεσίας στην τοπική αποθήκευση ) ) var sait=location.hostname; // σε ποια τοποθεσία βρίσκεται το σενάριο localStorage = "0";

setInterval(sec, 1000) // εκτελείτε τη συνάρτηση κάθε δευτερόλεπτο
Το πιο ενδιαφέρον σημείο από το σενάριό μου, νομίζω, θα πρέπει να είναι:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Εδώ αποστέλλεται ένα μήνυμα στο σενάριο φόντου, δηλαδή δύο μεταβλητές: site:sait - περιέχει τη διεύθυνση του ιστότοπου στον οποίο το σενάριο

time:localStorage - ο χρόνος που αφιερώθηκε σε αυτό το σενάριο.
φόντο.js

Εδώ, μάλιστα, είναι. Δεν θα υπεισέλθω σε λεπτομέρειες γιατί… κατ' αρχήν αυτό δεν είναι απαραίτητο. Αρκεί να γνωρίζετε ένα ξεκάθαρο παράδειγμα για να εφαρμόσετε το σχέδιό σας. Εάν προσθέσετε δεδομένα στην τοπική αποθήκευση στο σενάριο background.js (καθώς και cookie, web sql), τότε τα ίδια δεδομένα μπορούν να χρησιμοποιηθούν στο σενάριο popup.js.

Αυτό είναι βασικά το μόνο που ήθελα να σας πω σχετικά με τη δημιουργία της επέκτασης, αλλά θα θίξω ένα ακόμη σημείο όπου είχα δυσκολίες.

Στη σελίδα ρυθμίσεων, έπρεπε να οργανώσω τη μεταφορά και απόθεση των τοποθεσιών σε διαφορετικές στήλες.

Επειδή Εάν τα δεδομένα εισάγονται χρησιμοποιώντας InnerHtml, τότε αυτή η επιλογή δεν θα εμφανίζεται ακριβώς έτσι. Να τι έπρεπε να οργανώσουμε:

$("#dannie").on("mouseover", ".sait", function() ( $(this).css(("border":"3px solid #ffffff")); )); $("#dannie").on("mouseout", ".sait", function() ( $(this).css(("border":"3px συμπαγές μαύρο")); )); $("#dannie").on("mousedown", ".sait", function() ( $(this).css(("border":"3px συμπαγές μαύρο")); )); $("#dannie").on("mouseover", ".sait", function() ( $(".sait").draggable(( helper:"clone" )); ));
αντί για το συνηθισμένο:
$(".sait").mouseover(function())( $("#"+this.id).css(("border":"3px solid #ffffff")); )); $(".sait").mouseout(function())( $("#"+this.id).css(("border":"3px συμπαγές μαύρο")); )); $(".sait").mousedown(function())( $("#"+this.id).css(("border":"0px συμπαγές μαύρο")); ));

$(".sait").draggable(( helper:"clone", ));

Υπάρχουν πολλοί ιστότοποι στο Διαδίκτυο που παρέχουν τη δυνατότητα κύλισης προς τα επάνω σε μια σελίδα χωρίς τη χρήση ποντικιού ή γραμμής κύλισης. Αλλά ταυτόχρονα, εξακολουθούν να υπάρχουν ιστότοποι όπου δεν υπάρχει τέτοια υλοποίηση. "Γιατί να μην προσπαθήσετε να γράψετε ένα σενάριο που θα προσθέτει ένα τέτοιο κουμπί σε όλους τους ιστότοπους;" - Σκέφτηκα και ξεκίνησα να το εφαρμόσω. Τέτοια σενάρια ονομάζονται σενάρια χρήστη και έχουν την επέκταση *.user.js. Για παράδειγμα, μπορείτε να το διαβάσετε στο Habré. Δυστυχώς, δεν μπορεί να γίνει χωρίς παγίδες. Υπάρχουν κάποιες διαφορές στην υλοποίηση του userjs για διαφορετικά προγράμματα περιήγησης. Θα επικεντρωθώ στην περιγραφή της εφαρμογής του σεναρίου userjs ως επέκταση για το πρόγραμμα περιήγησης Google Chrome.

manifest.json manifest.jsonΤο αρχείο που απαιτείται για την επέκταση του Google Chrome είναι

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "ταιριάζει": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "Επέκταση σεναρίου χρήστη στην κορυφή για το google chrome", "όνομα": "backTopUserJS", "έκδοση": "1" )

Για ευκολία, χρησιμοποιούμε τη βιβλιοθήκη JQuery, την οποία τοποθετήσαμε δίπλα στο αρχείο manifest.json και στο κύριο αρχείο σεναρίου (στην περίπτωσή μας, backTopUserJS.user.js). Το περιεχόμενό του έχει ως εξής:

// ==UserScript== // @name backTopUserJS // @συγγραφέας Aleksandr Filatov // @license MIT // @έκδοση 1.0 // ==/UserScript== συνάρτηση main() ( var disp = $(window).scrollTop () > 400 "block" : "none" var $upButton = $(";

"); $(document).find("body").append($upButton); $upButton.click(function () ($("html, body").animate(( scrollTop: 0 ), "slow" ) ) $(window).scroll(function () ( if ($(window)). )) var script = document.createElement("script"). appendChild(script);

Νομίζω ότι το σενάριο είναι αρκετά σαφές για να το εξετάσω λεπτομερώς. Μόνο οι 3 τελευταίες γραμμές αξίζει να εξηγηθούν. Στην πραγματικότητα, αυτό είναι ένα μικρό hack που εισάγει το σενάριό μας στον κώδικα της σελίδας του ιστότοπου. Αν κάποιος από εσάς βρει έναν καλύτερο τρόπο, μπορεί να γράψει τις διορθώσεις του στα σχόλια :)

Εγκατάσταση της επέκτασης στο πρόγραμμα περιήγησης

Μπορείτε να εγκαταστήσετε προσαρμοσμένα σενάρια στο Google Chrome, παρόμοια με άλλα προγράμματα περιήγησης, αλλά επειδή η Google ενδιαφέρεται για την ασφάλειά μας, πρέπει να είναι τυλιγμένα σε επεκτάσεις προγράμματος περιήγησης. Ας δούμε την εγκατάσταση βήμα προς βήμα.

Δημιουργήστε έναν φάκελο για την επέκτασή μας ως εξής: C:\MyChromeExtensionUserJS

Για κάθε επέκταση δημιουργούμε τον δικό μας κατάλογο, για παράδειγμα στην περίπτωσή μας θα τον ονομάσουμε C:\MyChromeExtensionUserJS\backTopUserJS . Προσθέστε αρχεία επέκτασης σε αυτόν τον κατάλογο.

Μεταβείτε στο "Σχετικά με το πρόγραμμα περιήγησης Google Chrome" -> καρτέλα "Επεκτάσεις" ή γράψτε chrome://extensions/ στη γραμμή διευθύνσεων

Επιλέξτε το πλαίσιο "Λειτουργία προγραμματιστή"

Κάντε κλικ στο κουμπί "Φόρτωση μη συσκευασμένης επέκτασης" και επιλέξτε τον κατάλογο της επέκτασής μας. Κάντε κλικ στο "OK".

Η επέκταση είναι εγκατεστημένη και έτοιμη για χρήση. Για να ενημερώσετε τις επεκτάσεις αφού κάνετε αλλαγές σε αυτές, απλώς κάντε κλικ στο κουμπί "Ενημέρωση επέκτασης" ή, στη λειτουργία προγραμματιστή, πατήστε τη συντόμευση πληκτρολογίου Ctrl+R.

Κατώτατη γραμμή

Μπορείτε να δείτε τις πηγές σεναρίων στο github. Το σενάριο δεν ισχυρίζεται ότι είναι ιδανικό, αλλά χρησιμεύει μόνο ως παράδειγμα και ώθηση για τη σύνταξη των δικών σας προσαρμοσμένων σεναρίων για το Google Chrome.

Η σύνταξη μιας επέκτασης για το google chrome δεν είναι δύσκολη. Αλλά κατά τη σύνταξη της πρώτης επέκτασης, μπορεί να προκύψουν (και) ερωτήσεις. Τα περισσότερα από τα εγχειρίδια για τη σύνταξη της πρώτης επέκτασης έχουν σχεδιαστεί για να χρησιμοποιούν το μανιφέστο της πρώτης έκδοσης, η υποστήριξη του οποίου θα σταματήσει στο εγγύς μέλλον.

Αυτό το άρθρο θα καλύψει:

• Πώς να δημιουργήσετε ένα μανιφέστο v.2
• Πώς να εργαστείτε με απομακρυσμένους πόρους
• Πώς να εργαστείτε με τα cookies
• Πώς να εργαστείτε με την τοπική αποθήκευση
• Πώς να εργαστείτε με ειδοποιήσεις

Εισαγωγή

Μέχρι το τέλος του άρθρου, θα έχουμε μια έτοιμη επέκταση organizer, η οποία θα έχει ένα πεδίο για την προσθήκη μιας νέας εργασίας, καθώς και μια λίστα εργασιών για την τρέχουσα ημέρα. Ας περιγράψουμε όλες τις απαιτήσεις για τον διοργανωτή:

• Πρέπει να υπάρχει πεδίο για να προσθέσετε ένα συμβάν (ημερομηνία, ώρα, συμβάν)
• Θα πρέπει να εμφανίζει όλες τις εργασίες για την τρέχουσα ημέρα, ταξινομημένες κατά ώρα
• Όλα τα προηγούμενα συμβάντα θα πρέπει να εμφανίζονται διαγραμμένα
• Θα πρέπει να έχει ένα πεδίο για την εισαγωγή της ώρας για το χρονικό διάστημα που πρέπει να εμφανίζεται η ειδοποίηση, καθώς και ένα πλαίσιο ελέγχου που επιτρέπει και απαγορεύει την εμφάνιση ειδοποιήσεων
• Θα πρέπει να εμφανίζει μια ειδοποίηση για ένα επερχόμενο συμβάν μια καθορισμένη ώρα πριν από το συμβάν

Προκήρυξη

Ας ξεκινήσουμε τη δημιουργία της επέκτασης από την αρχή, δηλαδή από το μανιφέστο. Το μανιφέστο είναι το ίδιο αρχείο στο οποίο είναι γραμμένες όλες οι παράμετροι επέκτασης. Όνομα, περιγραφή, έκδοση, άδεια πρόσβασης σε ιστότοπους, άδεια χρήσης cookies, ειδοποιήσεις, τοπική αποθήκευση. Γενικά, το μανιφέστο είναι ο εγκέφαλος της επέκτασης. Δημιουργήστε ένα αρχείο manifest.json. Το μανιφέστο είναι το μόνο αρχείο που πρέπει να έχει προκαθορισμένο όνομα όλα τα άλλα αρχεία μπορούν να ονομάζονται όπως θέλετε. Αυτό το αρχείο έχει τρία υποχρεωτικά πεδία:

manifest.json

("όνομα": "Επέκταση διοργανωτή", // Όνομα επέκτασης "έκδοση": "1.0", // Έκδοση επέκτασης. "manifest_version": 2 // Έκδοση Manifest)

Υπάρχουν μερικοί κανόνες εδώ:

• Η έκδοση του μανιφέστου πρέπει να είναι ακέραιος, δηλαδή να γράφεται ως 2, όχι ως "2".
• Η έκδοση επέκτασης πρέπει να είναι συμβολοσειρά, αλλά να περιέχει μόνο αριθμούς και τελείες, δηλαδή, το "1.0" είναι καλό, αλλά το 1.0 και το "0.9 beta" είναι κακά.

Αφού ολοκληρωθούν τα απαιτούμενα πεδία, ας προχωρήσουμε στη δημιουργία του αναδυόμενου παραθύρου επέκτασης. Για να ανοίξει ένα παράθυρο όταν κάνετε κλικ σε ένα εικονίδιο, πρέπει να προσθέσετε το πεδίο "browser_action" στο μανιφέστο.

manifest.json

( … "browser_action": ( "default_title": "Open organizer", // Title. Είναι ορατό αν τοποθετήσετε το δείκτη του ποντικιού πάνω από το εικονίδιο στο πρόγραμμα περιήγησης "default_icon": "icon_small.png", // Διαδρομή στο εικονίδιο επέκτασης " default_popup": " popup.html" // Διαδρομή στη σελίδα με το αναδυόμενο παράθυρο ) )

Τώρα ας δημιουργήσουμε ένα αναδυόμενο παράθυρο. Αυτή είναι μια κανονική σελίδα html που μπορεί να είναι οποιουδήποτε μεγέθους και χρώματος, χωρίς κόλπα. Ας ονομάσουμε το αρχείο "popup.html". Δεν αρκεί η δημιουργία αυτού του αρχείου - πρέπει να καθοριστεί στο μανιφέστο. Αυτό κάναμε: "default_popup": "popup.html".

αναδυόμενο παράθυρο.html

Λειτουργεί!

Προσθήκη επέκτασης στο πρόγραμμα περιήγησης

Τώρα ήρθε η ώρα να δοκιμάσουμε τη λειτουργικότητα της επέκτασής μας. Για να το κάνετε αυτό, κάντε λήψη της επέκτασης στο πρόγραμμα περιήγησης. Ανοίξτε το μενού επεκτάσεων στο Chrome. Βάζουμε το πουλί σε "Λειτουργία προγραμματιστή".

Μετά από αυτό, θα εμφανιστούν τρία κουμπιά. Κάντε κλικ στο "Φόρτωση μη συσκευασμένης επέκτασης...". Επιλέξτε το φάκελο με τα αρχεία επέκτασης. Μετά από αυτό θα εμφανιστεί η επέκτασή μας. Εάν όλα είναι σωστά, τότε όταν κάνετε κλικ στο εικονίδιο, θα εμφανιστεί ένα παράθυρο:

Σύνδεση σεναρίων

Τώρα μπορούμε να φτάσουμε στα διασκεδαστικά πράγματα. Ας συνδέσουμε δύο αρχεία javascript. Το πρώτο είναι το popup.js, το δεύτερο είναι το jquery. Δεν θα υπάρξουν προβλήματα με το πρώτο, αλλά θα συνδέσουμε όχι το τοπικό jquery, αλλά το απομακρυσμένο, από τη διεύθυνση ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js. Τα προβλήματα προκύπτουν από το γεγονός ότι από προεπιλογή η επέκταση δεν έχει πρόσβαση σε πόρους τρίτων. Για να αποκτήσετε πρόσβαση, πρέπει να το υποδείξετε στο μανιφέστο. Η πρόσβαση σε κάτι υποδεικνύεται στο πεδίο "άδειες". Επίσης, για απομακρυσμένα σενάρια και css, πρέπει να υποδείξετε διαθέσιμους απομακρυσμένους πόρους.

manifest.json

( ... "άδειες": [ "https://ajax.googleapis.com/*" ], "content_security_policy": "script-src "self" https://ajax.googleapis.com; object-src "self "" )

Τώρα ας συνδέσουμε αυτά τα σενάρια στο popup.html

αναδυόμενο παράθυρο.html

Αποθήκευση

Χρησιμοποιώντας τον χώρο αποθήκευσης στο Chrome, μπορείτε να αποθηκεύσετε δεδομένα χρήστη. Και είναι αποθηκευτικό ότι η επέκτασή μας θα αποθηκεύει μελλοντικά συμβάντα. Υπάρχουν δύο λόγοι για αυτό. Πρώτον, τα δεδομένα που είναι αποθηκευμένα στο χώρο αποθήκευσης μπορούν να συγχρονιστούν εάν συνδεθείτε στο πρόγραμμα περιήγησης. Και δεύτερον, τα δεδομένα μπορούν να αποθηκευτούν όχι μόνο ως συμβολοσειρά, όπως στα cookies, αλλά σε οποιαδήποτε μορφή, δηλαδή μπορούν να αποθηκευτούν τόσο πίνακες όσο και αντικείμενα. Για να λειτουργήσει αυτό, ας ανοίξουμε την πρόσβαση στο χώρο αποθήκευσης στο μανιφέστο.

manifest.json

( ... "άδειες": [ ... "αποθήκευση" ] ... )

Τώρα ας επανασχεδιάζουμε το αναδυόμενο παράθυρο. Στο αναδυόμενο παράθυρο θα υπάρχει ένα πεδίο με τη σημερινή ημερομηνία, τρεις εισόδους για την ημερομηνία, την ώρα και την περιγραφή του νέου συμβάντος, ένα κουμπί για την προσθήκη ενός νέου συμβάντος, καθώς και μια λίστα με όλα τα συμβάντα για σήμερα.

αναδυόμενο παράθυρο.html

Ημερομηνία

Ημερομηνία	Φορά	Εργο

Και αμέσως προσθέστε μια εμφάνιση ημερομηνίας στο μπλοκ #today_date.

popup.js

$(function())( var today = new Date(); $("#today_date").html(today.getDate()+"."+(parseInt(today.getMonth())+1)+". " + today.getFullYear());

Θα πρέπει να μοιάζει με αυτό:

Έτσι, όταν κάνουμε κλικ στο κουμπί «+», θα πρέπει να προστεθεί ένα συμβάν. Στην αρχή του αρχείου, θα δηλώσουμε μια μεταβλητή καθολικής αποθήκευσης - ένα αντικείμενο για εργασία με αποθήκευση, καθώς και μια καθολική σειρά εργασιών για την αποθήκευση συμβάντων.

popup.js

Var storage = chrome.storage.sync; var tasks = new Array(); $(function())( … $("#add_task").click(function())( var new_task = new Object(); new_task.date = validateField($("#new_date").val(), " ημερομηνία" ); new_task.time = validateField($("#new_time").val(), "time"); new_task.task = $("#new_task").val(); if(!new_task.task | |. new_task.date ||. !new_task.

Η συνάρτηση επικύρωσης ελέγχει ότι η ημερομηνία είναι γραμμένη στη μορφή η.μ.εεεε και η ώρα σε μορφή ωω:λλ, καθώς και ότι η περιγραφή συμβάντος περιέχει τουλάχιστον τρεις χαρακτήρες.

popup.js

Var validateField = function(val, type)( if(type == "date")( var date = val.split("."); var year = new Date(); year = year.getFullYear(); if( date.length == 3 && parseInt(date) == date && date = 3)( return val; ) return null )

Τακτοποιήσαμε την προσθήκη, ας προχωρήσουμε στη λήψη εκδηλώσεων για σήμερα. Για να γίνει αυτό, πρέπει να πάρουμε όλα τα συμβάντα από τη βάση δεδομένων, να επιλέξουμε μόνο τα σημερινά συμβάντα από όλα και να τα ταξινομήσουμε κατά χρόνο με αύξουσα σειρά.

popup.js

$(function())( … var now_hours = today.getHours()< 10 ? "0" + today.getHours() : today.getHours(); var now_minutes = today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes(); var now_time = now_hours + "" + now_minutes; storage.get("tasks",function(items){ if(items.tasks){ tasks = items.tasks; var today_tasks = getTodayTasks(tasks); if(today_tasks.length >0)( for(var i in today_tasks)( var this_time = today_tasks[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="done""; var add_html = ""+today_tasks[i].time+" "+today_tasks[i].task+""; $("ul").append(add_html); ) ) ))); … ));

Η συνάρτηση getTodayTasks() επιστρέφει μόνο συμβάντα με τη σημερινή ημερομηνία από τη γενική λίστα.

popup.js

Var getTodayTasks = function(tasks)( var today_tasks = new Array(); var today = new Date(); var today_date = today.getDate()+"."+(today.getMonth() + 1)+ "." + Today.getFullYear(); Today_tasks);

Η συνάρτηση sortTasks() ταξινομεί τα γεγονότα με αύξουσα χρονική σειρά.

popup.js

Var sortTasks = συνάρτηση(εργασίες)( if(tasks.length > 0)( var swapped = true; while (swapped) ( swapped = false; for (var i=0; i< tasks.length-1; i++) { var this_time = tasks[i].time.replace(":", ""); var next_time = tasks.time.replace(":", ""); if (this_time >next_time) ( var temp = tasks[i]; tasks[i] = tasks; tasks = temp; swapped = true; ) ) ) tasks return; )

Ειδοποιήσεις

Ήρθε η ώρα να διαμορφώσετε την εμφάνιση των ειδοποιήσεων στην οθόνη. Ας προσθέσουμε ένα ειδικό πλαίσιο ελέγχου στο αναδυόμενο παράθυρο. Εάν αυτό το πλαίσιο ελέγχου είναι επιλεγμένο, οι ειδοποιήσεις θα εμφανίζονται εάν δεν είναι επιλεγμένο, δεν θα εμφανίζονται. Θα προσθέσουμε επίσης μια εισαγωγή κειμένου. Ο αριθμός σε αυτήν την είσοδο θα δείχνει πόσο καιρό πριν από το συμβάν θα εμφανίζεται η ειδοποίηση. Δηλαδή, εάν έχουμε μια εκδήλωση προγραμματισμένη για τις 19:00, αυτή η εισαγωγή κειμένου θα περιέχει 5, που σημαίνει ότι μια ειδοποίηση θα εμφανιστεί στις 18:55. Ας προσθέσουμε κώδικα με αυτές τις εισόδους στο popup.html

αναδυόμενο παράθυρο.html

Εμφάνιση ειδοποιήσεων

Τώρα ας καταλάβουμε πώς θα λειτουργήσει αυτό. Όταν κάνετε κλικ σε ένα πλαίσιο ελέγχου, το επιλεγμένο χαρακτηριστικό του θα επιλεγεί και η τιμή του χαρακτηριστικού θα γραφτεί στο cookie "show_notifications". Ας προχωρήσουμε στην εισαγωγή κειμένου. Όταν αλλάξει η τιμή του, η νέα τιμή θα επικυρωθεί, εάν είναι ακέραιος και όχι περισσότερο από 120, γράφουμε τη νέα τιμή στο cookie «when_to_notify».

Αλλά για να λειτουργήσει αυτό για εμάς, πρέπει να ανοίξουμε την πρόσβαση στα cookies. Για να το κάνετε αυτό, μεταβείτε στο manifest.json και προσθέστε το στο "permissions"

manifest.json

( ... "άδειες": [ ... "cookies" ] ... )

Τώρα μπορείτε να ξεκινήσετε το σενάριο. Ας πάμε στο popup.js. Αρχικά, ας ορίσουμε τις αρχικές τιμές στις εισόδους. Από προεπιλογή, το πλαίσιο ελέγχου δεν είναι επιλεγμένο, δηλαδή οι ειδοποιήσεις δεν εμφανίζονται και η ώρα είναι 0. Όταν κάνετε κλικ στο πλαίσιο ελέγχου, η τιμή του cookie "show_notifications" θα αλλάξει. Όταν αλλάζετε την τιμή στο πεδίο κειμένου, η τιμή του cookie "when_to_notify" θα αλλάξει.

popup.js

$(function())( setCheckbox(); setWhenToNotify(getCookie("when_to_notify")); ... $("#show_notifications").click(function())( setCookie("show_notifications", document.getElementById(" show_notifications" ).checked); $("#when_to_notify").change(function())(setWhenToNotify($(this).val()); ));

Ας ρίξουμε μια πιο προσεκτική ματιά στις λειτουργίες. Ας ξεκινήσουμε με τις λειτουργίες της εργασίας με cookies. Σε αυτήν την περίπτωση, οι έτοιμες συναρτήσεις ελήφθησαν από το w3schools.com.

popup.js

Var setCookie = function(c_name,value,exdays)( /* *Λήψη από http://www.w3schools.com/js/js_cookies.asp */ var exdate=new Date(); exdate.setDate(exdate.getDate( ) + exdays var c_value(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); getCookie = function(c_name)(Call Vasya P. /* *Λήψη από http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(" ; "); για (i=0;i