Όλα τα στοιχεία στο Chrome Web Store χωρίζονται σε εφαρμογές και επεκτάσεις. Θα κάνουμε και τα δύο. Η εφαρμογή που δημιουργούμε θα εμφανίζεται ως εικονίδιο σε μια νέα καρτέλα του προγράμματος περιήγησης και θα σας επιτρέψει να εκκινήσετε γρήγορα τον ιστότοπό σας. Η επέκταση είναι ένα ειδικό κουμπί στη γραμμή εργαλείων, κάνοντας κλικ στο οποίο θα εμφανιστεί ένα πλαίσιο με τις πιο πρόσφατες ενημερώσεις ιστότοπου.

Δημιουργία εφαρμογής για το Google Chrome

1. Κατεβάστε το αρχείο με το πρότυπο επέκτασης από αυτόν τον σύνδεσμο.

2. Αποσυμπιέστε το σε οποιοδήποτε μέρος είναι κατάλληλο για εσάς. Υπάρχει ένα αρχείο μέσα manifest.jsonκαι εικονίδιο icon.png.

3. Ανοίξτε το αρχείο manifest.jsonσε ένα σημειωματάριο και επεξεργαστείτε τα περιεχόμενά του. Πρέπει να εισαγάγετε το όνομα του ιστότοπού σας στη γραμμή 2, την περιγραφή του (έως 132 χαρακτήρες) στη γραμμή 3 και τη διεύθυνση του ιστότοπού σας στις γραμμές 5 και 7. Αποθηκεύστε τις αλλαγές που έγιναν.

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

Δημιουργία επέκτασης για το Google Chrome

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

1. Λάβετε το πρότυπο επέκτασης από αυτόν τον σύνδεσμο.

2. Αποσυμπιέστε. Ανοίξτε το αρχείο manifest.json στο Σημειωματάριο και επικολλήστε το όνομα του ιστότοπού σας, τη σύντομη περιγραφή του και τον τίτλο του παραθύρου επέκτασης (γραμμές 2, 3 και 8).

3. Ανοίξτε το αρχείο labnol.jsκαι υποδείξτε τη διεύθυνση της ροής RSS του ιστότοπού σας.

4. Αντικαταστήστε το εικονίδιο από το αρχείο με τη δική σας εικόνα σε μορφή PNG, μεγέθους 128*128.

Δημοσίευση

Η επέκταση και η εφαρμογή που φτιάξαμε μπορούν να χρησιμοποιηθούν με δύο τρόπους. Εάν είστε ο κάτοχος ενός ιστότοπου και θέλετε να προσελκύσετε επιπλέον χρήστες σε αυτόν, μπορείτε να δημοσιεύσετε την εργασία σας στο Chrome Web Store. Για να το κάνετε αυτό, συσκευάστε την επέκταση και τα πρόσθετα αρχεία στο δικό τους αρχείο, μεταβείτε στη σελίδα του Πίνακα ελέγχου του Chrome και ανεβάστε την εργασία σας στο κατάστημα Google. Εδώ θα σας ζητηθεί να ανεβάσετε ένα στιγμιότυπο οθόνης, να δώσετε μια εκτεταμένη περιγραφή και να καθορίσετε κάποιες άλλες παραμέτρους. Η σελίδα είναι στα ρωσικά, ώστε να μπορείτε να την κατανοήσετε εύκολα. Απλώς σημειώστε ότι για να δημοσιεύσετε μια επέκταση, πρέπει να είστε ο επαληθευμένος κάτοχος του ιστότοπου για τον οποίο κάνατε την επέκταση. Επιπλέον, θα σας ζητηθεί να εισαγάγετε ένα τέλος εισόδου $5 ανά δημοσίευση.

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

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

Πάντα ήθελα να πω στους ανθρώπους για ενδιαφέρουσες ευκαιρίες (τεχνολογίες) που μπορεί τώρα να είναι διαθέσιμες σε όλους, αλλά για κάποιο λόγο δεν είναι διαθέσιμες σε όλους. Ναι, αποδείχθηκε ταυτολογία, αλλά αντανακλά πλήρως την εσωτερική μου αγανάκτηση για αυτό το φλέγον θέμα για μένα. Όπως και να έχει, η συζήτηση τώρα δεν θα είναι για το πώς λένε. Σήμερα θα μιλήσουμε για τη δημιουργία επεκτάσεων για το πρόγραμμα περιήγησης Google Chrome (εφεξής Chrome).

Η επέκταση που θα αναπτύξουμε σε αυτό το άρθρο βρίσκεται στο Google Chrome Web Store, με τη μόνη διαφορά ότι διαθέτει προηγμένη λειτουργικότητα. Επιπλέον, υπάρχει ο πηγαίος κώδικας στο GitHub, και πάλι με την επιφύλαξη ότι όλα εκεί είναι γραμμένα στο CoffeeScript, και εδώ η ιστορία θα γραφτεί με JavaScript. Παρεμπιπτόντως, δεν είμαι οπαδός ή υποστηρικτής του CoffeeScript, αλλά είναι πολύ ενδιαφέρον και χρήσιμο πράγμα - σας συμβουλεύω να το δοκιμάσετε.

Εάν έχετε σκεφτεί ποτέ την ιδέα να δημιουργήσετε μια επέκταση για Chrome, Firefox, Maxthon και άλλα προγράμματα περιήγησης, τότε πιθανότατα έχετε ήδη παρατηρήσει ότι η ελάχιστη προσπάθεια που πρέπει να καταβάλετε είναι για το Chrome. Μπορείτε να το επαληθεύσετε κοιτάζοντας την τεκμηρίωση για τα αντίστοιχα προγράμματα περιήγησης.

Διατύπωση του προβλήματος

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

• Η επέκταση θα πρέπει να κρύβει όλα τα σχόλια στο κοινωνικό δίκτυο VK.
• Η επέκταση πρέπει να μπορεί να εμφανίζει σχόλια.
• Η επέκταση πρέπει να μπορεί να εμφανίζει σχόλια σε συγκεκριμένες σελίδες.

Με την πρώτη ματιά, όλα είναι απλά και μπορούμε να τα καταφέρουμε. Ωστόσο, στο πλαίσιο του άρθρου θα εφαρμόσουμε μόνο τα δύο πρώτα σημεία.

Προβλέπω ερωτήσεις των οποίων το περιεχόμενο μπορεί να είναι κάπως έτσι: "Γιατί να κρύβεις σχόλια αν αυτό είναι όλο το νόημα ενός κοινωνικού δικτύου;" Λοιπόν, είναι μια δίκαιη ερώτηση που αξίζει μια λεπτομερή απάντηση:

Οι περιστάσεις αποδείχτηκαν ότι τελευταία, όταν βλέπω σχόλια στο VK, θέλω να δώσω βουνά από φοίνικες στους σχολιαστές. Έχω εγγραφεί σε μεγάλο αριθμό διαφορετικών δημόσιων σελίδων, θεματικών (ανάπτυξη ιστού) και όχι τόσο. Και όσο παράξενο κι αν φαίνεται, γίνομαι ο πιο γενναιόδωρος σε ομάδες με περιεχόμενο που με ενδιαφέρει και όχι γάτες (στην περίπτωσή μου τα πάντα). Δεν έχω δει ποτέ πουθενά αλλού να ρέουν τόσο αντιεπαγγελματικές και άσχημες πληροφορίες στα σχόλια, και σκέφτονται ακόμη και να μαλώσουν. Επιπλέον, τα σχόλια στη ροή ειδήσεων δεν φαίνονται αισθητικά ευχάριστα. Σε γενικές γραμμές, είπε και έγινε.

Πλαίσιο επέκτασης

Η πιο ευχάριστη έκπληξη για μένα ήταν ότι στην αρχή του ταξιδιού μας υποδέχεται ο περιγραφικός χαρακτήρας των πράξεων. Με απλά λόγια, πρέπει να περιγράψουμε την εφαρμογή μας, τα δικαιώματα και τις δυνατότητές της - το αρχείο manifest.json χρησιμοποιείται για αυτό.

Πρώτα απ 'όλα, πρέπει να συμπληρώσετε τρία υποχρεωτικά πεδία:

( "manifest_version": 2, // Ξεκινώντας με το Chrome 18 σύνολο 2, διαφορετικά 1 (τέτοια παλιά πράγματα δεν υποστηρίζονται) "name": "My Extension", // Όνομα επέκτασης "version": "versionString" // Έκδοση επέκτασης )

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

Έτσι, είμαστε όλοι συνηθισμένοι στο γεγονός ότι μια έκδοση ενός κάτι αποτελείται από τρεις αριθμούς που χωρίζονται με τελείες - Major.Minor.Patch (Σημαντικός αριθμός). Με npm, bower και άλλες απολαύσεις η συζήτηση είναι σύντομη: είτε έτσι είτε καθόλου. Αλλά η Google προσφέρει τις ακόλουθες επιλογές:

"έκδοση": "1" "έκδοση": "1.0" "έκδοση": "2.10.2" "έκδοση": "3.1.2.4567"

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

Στην περίπτωσή μας, το αρχείο δήλωσης θα μοιάζει με αυτό:

( "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", " δικαιώματα": [ "activeTab" ], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "icons": ( "16": "icon_16.png", "48 ": "icon_48.png", "128": "icon_128.png" ), "background": ( "persistent": false, "page": "background.html" ), "content_scripts": [ ( "ταιριάζει" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "styles /commentblocker_on.css" ] )

Από ό,τι δεν έχει προηγηθεί

• Το __MSG_key__ είναι η άποψη του Chrome για τη διεθνοποίηση εφαρμογών (i18n). Μπορεί να χρησιμοποιηθεί τόσο στο αρχείο δήλωσης όσο και σε άλλα αρχεία (ακόμη και CSS).
• web_accessible_resources - μια σειρά από διαδρομές πόρων που θα χρησιμοποιηθούν στη συνέχεια στο πλαίσιο ιστοσελίδων. Χωρίς να προσδιορίσετε τη διαδρομή σε αυτό, τίποτα δεν μπορεί να χρησιμοποιηθεί σε σελίδες ιστότοπων, εάν μια τέτοια συμπεριφορά είναι αναμενόμενη.

Πόροι επέκτασης

Ένα τεράστιο πλεονέκτημα για το κάρμα του Chrome είναι ότι μπορούμε πλέον να ενεργοποιήσουμε την επέκταση, φυσικά, εάν έχουν δημιουργηθεί όλοι οι πόροι που καθορίζονται στο manifest.json.

Δεν νομίζω ότι αξίζει να εστιάσουμε σε ό,τι υπάρχει στα αρχεία commentblocker.css και commentblocker_on.css. Θα δώσω μόνο το πρώτο, το οποίο περιλαμβάνει όλους τους επιλογείς που περιέχουν σχόλια:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link ( ορατότητα: κρυφό !important; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_comments_wrap, #mv_comments_your_comments, #head_perv_ σχόλιο ( εμφάνιση: κανένα !import ant; ορατότητα: κρυφό ! σημαντικό; ) body:after ( position: fixed; content: "__MSG_mode_enable__"; top: 5px; right: 5px; padding: 6px 12px; background-color: #ffc; περίγραμμα: 1px solid #ddd; z-index: 9999 ;)

Στο αρχείο commentblocker_on.css, όπως μπορείτε να μαντέψετε, ισχύει το αντίθετο. Σημειώστε ότι ακριβώς στο CSS χρησιμοποιώ μια γραμμή με το περιεχόμενο του κλειδιού γλώσσας: "__MSG_mode_enable__" . Ήρθε η ώρα να δημιουργήσετε ένα αρχείο όπου θα αποθηκεύονται αυτά τα κλειδιά.

Στη ρίζα της επέκτασής μας, δημιουργούμε τον κατάλογο _locales και τους καταλόγους en και ru που είναι ένθετοι μέσα σε αυτόν. Στη συνέχεια, περιγράφουμε τα κλειδιά μας στο αρχείο messages.json.

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": "Ένας βολικός τρόπος απόκρυψης σχολίων στη ροή ειδήσεων και τις ομάδες." ), "browser_action": ( "message ": " Αλλαγή τύπου σχολίου" ), "mode_enable": ( "μήνυμα": "Χωρίς σχόλια!" ), "mode_disable": ( "μήνυμα": "Με σχόλια!" ) )

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

Τώρα δημιουργούμε τα αρχεία background.html, πρώτα ως εξής:

Ιστορικό

Όλα εδώ είναι τα ίδια όπως στην κανονική HTML - τίποτα ασυνήθιστο. Παρεμπιπτόντως, δεν χρειάζεται να δημιουργήσετε το αρχείο background.html, καθώς δημιουργείται αυτόματα με βάση τα πεδία στο manifest.json .

Εκκίνηση της επέκτασης

Μπορείτε να εκτελέσετε την επέκταση χωρίς να γράψετε ούτε μια γραμμή JavaScript. Για να το κάνετε αυτό, πρέπει να περάσετε από το μενού:

• Ρύθμιση και διαχείριση του Google Chrome (Hamburger)
• Πρόσθετα εργαλεία
• Επεκτάσεις
• Επιλέξτε το πλαίσιο δίπλα στην "λειτουργία προγραμματιστή"
• Λήψη μη συσκευασμένης επέκτασης
• Επιλέξτε φάκελο με επέκταση

Η επέκταση φορτώθηκε και εμφανίστηκε στο μενού. Ναι, ναι, αυτό είναι αυτό το «Β».

Φαίνεται ότι η επέκταση που μόλις δημιουργήσαμε δεν έχει τίποτα στο κεφάλι της (δεν υπάρχει λογική) και όλα τα σχόλια στις σελίδες του κοινωνικού δικτύου με το γράμμα "Β" είναι πλέον κρυμμένα. Η απάντηση βρίσκεται στο manifest.json, όπου στο πεδίο "content_scripts": () υποδείξαμε σε ποιες σελίδες (http://vk.com/* και https://vk.com/*) θα το αρχείο commentblocker.css να συμπεριλαμβάνεται αυτόματα, πράγμα που αποκρύπτει όλα τα σχόλια. Σας συμβουλεύω να διαβάσετε περισσότερα για τα μαθηματικά μοτίβα. Είναι τόσο απλό στην εμφάνιση, αλλά κάτω από την κουκούλα είναι σχεδόν ένα γκρι ζελατινάκι, με όλα τα κουδούνια και τις σφυρίχτρες.

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

Αναβίωση της επέκτασης

Απομένει να ολοκληρώσουμε το δεύτερο σημείο της εργασίας, δηλαδή να εφαρμόσουμε τη δυνατότητα εμφάνισης σχολίων. Εν ολίγοις, πρέπει να προωθήσουμε ένα αρχείο commentblocker_on.css, το οποίο θα παρακάμψει τους κανόνες του αρχείου commentblocker.css. Και εδώ η παντοδύναμη JavaScript μας σπεύδει να μας βοηθήσει.

Θυμάστε τι είπα για το background.html; Ναι, ναι, για το γεγονός ότι δεν χρειάζεται να δημιουργηθεί. Ας αλλάξουμε ελαφρώς το manifest.json:

... "background": ( "persistent": false, "scripts": [ "scripts/commentblocker.js" ] ), ...

Μόλις συνδέσατε το αρχείο JavaScript. Τίποτα ιδιαίτερο. Ας πάμε σε αυτό το αρχείο.

Δεν μπορείτε απλώς να τοποθετήσετε το JS σε μια σελίδα. Και το ίδιο πρόβλημα δεν υπάρχει μόνο με τα σενάρια. Επομένως, πρέπει να χρησιμοποιήσουμε μια ειδική ένεση executeScript.

Πρώτα πρέπει να προσθέσετε ένα πρόγραμμα χειρισμού συμβάντων κλικ στο εικονίδιο της επέκτασης:

Chrome.browserAction.onClicked.addListener(function(tab) ( chrome.tabs.executeScript(tab.id, ( code: "(" + toggleComments.toString() + ")();" )); ));

Όπου το toggleComments είναι μια συνάρτηση που θα εισάγει το αρχείο CSS στη σελίδα:

Var toggleComments = function() ( var extensionLink; (document.getElementById("extension") == null) ? (extensionLink = document.createElement("link"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "επέκταση", extensionLink.type = "text/css", extensionLink.rel = "stylesheet", document.getElementsByTagName("head").appendChild(extensionLink)) : (έγγραφο. getElementsByTagName("head").removeChild(document.getElementById("επέκταση"))) );

Νομίζω ότι οι λέξεις ότι αυτό το κομμάτι κώδικα ελέγχει αν το CSS μας είναι συνδεδεμένο στη σελίδα και εξάγει συμπεράσματα σχετικά με την ανάγκη ενεργοποίησης ή απενεργοποίησης του θα είναι αρκετές.

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

• onCreated - δημιουργία καρτέλας.
• onUpdated - ενημέρωση της καρτέλας.
• onRemoved - κλείσιμο μιας καρτέλας.

Αξίζει να σημειωθεί ότι το συμβάν onUpdated καλείται δύο φορές:

• Ενημέρωση σελίδας.

Στο StackOverflow συμβουλεύουν να ελέγξετε την κατάσταση της σελίδας:

Chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) ( if (changeInfo && changeInfo.status === "ολοκληρώθηκε") ( ... ) ));

Τώρα, όταν κάνετε κλικ στο εικονίδιο, θα συνδεθεί ένα αρχείο στυλ που θα εμφανίζει σχόλια και κάνοντας ξανά κλικ στο εικονίδιο θα τα κρύψει ξανά.

συμπεράσματα

Παρεμπιπτόντως, αξίζει να αναφέρω την πλήρη έκδοση της επέκτασης VK Comment Blocker, η οποία είναι διαθέσιμη στο

Τα πιο έγκυρα άτομα σε αυτόν τον τομέα είναι ο Wladimir Palant (έγραψε το AdBlock Plus), ... Οι επεκτάσεις για το Chrome γράφονται πιο εύκολα από ό,τι για τον Firefox. Είναι ενδιαφέρον ότι η πιο δημοφιλής επέκταση για το Chrome είναι το "Tyuryaga VKontakte" (σύμφωνα με τα στατιστικά στοιχεία του Yandex).

Η πρόκληση είναι να αναπτυχθεί μια επέκταση που θα ανταποκρίνεται σε ορισμένες σελίδες HTML που ανοίγουν στο πρόγραμμα περιήγησης. Για παράδειγμα, τροποποιήστε τον κώδικα HTML μιας σελίδας ιστότοπου για να κάνετε πιο βολική τη χρήση αυτού του ιστότοπου.
Η λύση δοκιμάστηκε σε Google Chrome 24.x και Chromium 6.x (Debian 6.0.6, amd64).

Η λύση του προβλήματος

Σύνοψη των βασικών ερωτημάτων που προκύπτουν κατά τη σύνταξη της επέκτασης crx.

Πώς να καταχωρήσετε μια επέκταση;

Πώς να ρυθμίσετε ένα χρονόμετρο;

Πώς να καταχωρήσετε μια επέκταση;

Για μια ελάχιστη επέκταση, αρκούν 4 αρχεία:

128.png background.js content.js manifest.json

Πού είναι το manifest.json:

( "manifest_version": 2, "name": "DomainCheck extension", "version": "0.1", "background": ( "scripts": ["background.js"]), "content_scripts": [ ( "ταιριάζει ": [ "*://*/*" ], "js": [ "content..png" ) // no web_accessible_resources )

Το αρχείο background.js περιέχει τον κώδικα που εκτελείται κατά την εκκίνηση του προγράμματος περιήγησης. Σε αυτό το σενάριο μπορείτε να "κρεμάσετε" το πρόγραμμα χειρισμού φόρτωσης περιεχομένου εγγράφου (document.location.href).

Το ίδιο το Chrome δημιουργεί το _generated_background_page.html:

Για να επικοινωνήσετε μεταξύ του background.js και του σεναρίου περιεχομένου, μπορείτε να χρησιμοποιήσετε μηνύματα (αίτημα/μήνυμα) και chrome.extension.getBackgroundPage(). Δείτε επίσης την επισκόπηση αρχιτεκτονικής των επεκτάσεων Chrome. Λέει ότι "Ένα σενάριο περιεχομένου είναι κάποια JavaScript που εκτελείται στο πλαίσιο μιας σελίδας που έχει φορτωθεί στο πρόγραμμα περιήγησης".

Σημείωση: Είναι δύσκολο να εντοπιστεί σφάλματα στη σελίδα φόντου (background.js) στο Chromium, καθώς δεν υπάρχει αντίστοιχο. καρτέλες στη σελίδα "Επεκτάσεις" σε λειτουργία προγραμματιστή.

Πώς να ελέγξετε την τρέχουσα διεύθυνση URL, να την περικόψετε και να υπολογίσετε τον κατακερματισμό;

Ο τρόπος εγκατάστασης ενός προγράμματος χειρισμού στο DOMContentLoaded περιγράφεται στο developer.chrome.com. Δείτε επίσης τεκμηρίωση σχετικά με τις σελίδες παρασκηνίου (background.js).

Για να ενσωματώσουμε κώδικα HTML σε μια σελίδα, μπορούμε να χρησιμοποιήσουμε τις συμβουλές από το άρθρο στο Habré (δείτε εκεί για την αναφορά του εγγράφου καθολικής μεταβλητής), αλλά πρέπει επίσης να συγκρίνουμε την τρέχουσα διεύθυνση URL με τη λίστα.

Έχει καταργηθεί το document.location.href;

Παράδειγμα από το stackoverflow.com για την απόκτηση του πλήρως αναγνωρισμένου ονόματος τομέα:

var url = "http://www.domain.ru/tmp/file.txt?abc=1&cde=2#123" var getLocation = function(href) ( var l = document.createElement("a"); l. href = href; επιστροφή l; ); var l = getLocation(url); ειδοποίηση (l.hostname)

Μπορείτε να επιλέξετε έναν υποτομέα 2ου επιπέδου ως εξής:

var l = getLocation(url); var d = l.hostname; συνάρτηση cutd(str) ( var re = /.*?\.([\w\d-\u0100-\uffff-\.]+\.[\w\d-\u0100-\uffff-\.]+ )/; return str.replace(re,"$1"); ) alert(cutd(d));

(δείτε συμβουλή στο stackoverflow.com).

ένεση sha1.js ...

Πώς να ρυθμίσετε ένα χρονόμετρο; Δείτε το δείγμα επεκτάσεων: Παράδειγμα σελίδας συμβάντος, background.js:

chrome.alarms.create((delayInMinutes: 0.1)); chrome.alarms.onAlarm.addListener(function() ( alert("Time"Time"; ));

Αυτό το σφάλμα στο Chromium έκλεισε στις 9 Ιανουαρίου 2013, αλλά δεν έχει εμφανιστεί ακόμη στις πιο πρόσφατες εκδόσεις για Windows.

Εάν εξακολουθείτε να αποφασίζετε να χρησιμοποιήσετε «μοντέρνους» συναγερμούς, τότε πώς να ρυθμίσετε σωστά ένα χρονόμετρο αφύπνισης αυθαίρετης διάρκειας/περιόδου περιγράφεται στο stackoverflow.com.

Για συμβατότητα με παλαιότερα προγράμματα περιήγησης, είναι καλύτερο να χρησιμοποιήσετε το window.setInterval() στο background.js:

var i = 0; window.setInterval(function() ( alert(i); i++), 2*1000); // σε χιλιοστά του δευτερολέπτου

Η συνάρτηση setTimeout() είναι ένα μόνο "ξυπνητήρι".

Το Disable-Enable οι επεκτάσεις chrome εκκινούν το background.js με νέο τρόπο. *) Πρέπει να ελέγξω το ίδιο πράγμα για να μπω στη λειτουργία; και κοιμήσου.

Πώς να κατεβάσετε το config.xml/time.txt και πώς να τα αναλύσετε;

Εάν κάνετε απλώς λήψη μέσω XMLHttpRequest, ενδέχεται να λάβετε το ακόλουθο μήνυμα: "Το XMLHttpRequest δεν μπορεί να φορτώσει το http://site/config.xml. Η προέλευση http://www.google.ru δεν επιτρέπεται από την Access-Control-Allow-Origin. ". Αυτό σημαίνει ότι όταν κάνετε ένα αίτημα μεταξύ τομέων, δεν ενεργοποιήσατε την επιλογή για CORS, .htaccess:

Σύνολο κεφαλίδων Access-Control-Allow-Origin "*"

Μπορείτε να επιτρέψετε αιτήματα μεταξύ τομέων στην επέκταση του Chrome και μέσω αδειών στο manifest.json:

( "manifest_version": 2, ... "permissions": [ "http://site/" ],

Ωστόσο, και οι δύο αυτές περιπτώσεις δεν λειτουργούν για μη συσκευασμένες επεκτάσεις Chromium. Για συσκευασμένες επεκτάσεις, οι εκδόσεις Chromium 6.0-7.0 εμφανίζουν μερικές φορές "Κακό μαγικό αριθμό" (για καθαρό Chrome αυτό το σφάλμα δεν παρατηρείται).
Σημείωση: Η προστασία CORS μπορεί να παρακαμφθεί στο Chromium μέσω της επιλογής --disable-web-security:

$ chromium-browser --disable-web-security http://domain/path

Προσθήκη: για το Chromium πρέπει να αλλάξετε τις γραμμές στο manifest.json ως εξής (καθορίζοντας ρητά τον τομέα και προσθέτοντας έναν αστερίσκο στη διαδρομή):

( "άδειες": [ "http://site/*" ],

Για να αποτρέψετε το web inspector(?) στο chrome από το να διαμαρτυρηθεί για το XMLHttpRequest() όταν το Διαδίκτυο είναι απενεργοποιημένο, μπορείτε να κάνετε το εξής:

var req = null; δοκιμάστε ( req = new XMLHttpRequest(); ) catch(err) () // δείτε συμβουλές στο stackoverflow.com

(αυτό είναι γραμμένο μετά από συμβουλές από το stackoverflow.com). ...

Για τον εντοπισμό σφαλμάτων στην ανάλυση, μπορείτε να χρησιμοποιήσετε το console.log("line"). Οι συμβολοσειρές δέχονται επιστροφές μεταφοράς χρησιμοποιώντας "\n".

Η ανάλυση XML σε JavaScript στην επέκταση chrome γίνεται ως εξής:

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("timeout"); var timeout = ts.textContent; if (ts) (console.log("timeout="+timeout);) var ds = xml.getElementsByTagName("domain"); αν (ds) (για (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

Πώς να χρησιμοποιήσετε καθολικές ατομικές μεταβλητές και δεδομένα πίνακα στην επέκταση chrome;

Για να συγχρονίσετε δεδομένα επέκτασης χρησιμοποιώντας το Storage API, χρειάζεστε την έκδοση Chrome >= 20. Στο μανιφέστο (manifest.json) πρέπει να γράψετε τα εξής:

"premissions": ["αποθήκευση" ]

Όπως γράφουν στην ομάδα google "Chromium HTML5", "έστρεψα την προσοχή μου στη βάση δεδομένων Web SQL, αλλά φαίνεται ότι η Web SQL δεν βρίσκεται πλέον σε "ενεργή συντήρηση", κάτι που με κάνει να πιστεύω ότι θα αφαιρεθεί από τις προδιαγραφές HTML." Βλ. Βάση δεδομένων SQL Web του W3C, σημείωση για περισσότερες λεπτομέρειες. Μπορείτε να δοκιμάσετε να χρησιμοποιήσετε τις βασικές έννοιες - για να επεκτείνετε το χώρο για τη βάση δεδομένων, μπορείτε να χρησιμοποιήσετε δικαιώματα: unlimitedStorage στο manifest.json. Για να χρησιμοποιήσετε τον "Απεριόριστο χώρο αποθήκευσης" υπάρχουν τα ακόλουθα API εκτός σύνδεσης: 1) Προσωρινή μνήμη εφαρμογών. 2) Σύστημα αρχείων. 3) IndexedDB. 4) WebSQL (καταργήθηκε). Για ένα παράδειγμα χρήσης του IndexedDB στο Chrome, βλ. Για ένα παράδειγμα εργασίας με το IndexedDB, ανατρέξτε στο gist.github.com:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("db μου") req.onerror = function() ( console.log("error"); )

Τοποθεσίες αρχείων IndexedDB,
Windows: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\IndexedDB,
Linux: /home//.config/google-chrome/Default/IndexedDB/chrome-xxx.indexeddb.leveldb/:

$ sudo ls -la /home/anonymous/.config/google-chrome/Default/IndexedDB/chrome-extension_ojeihbjghbabiocoglbfhdebhhckdnol_0.indexeddb.leveldb/ συνολικά 24 drwx------- 2 4706 ανώνυμα. drwx------ 3 ανώνυμος ανώνυμος 4096 Φεβ 7 03:08 .. -rw-r--r-- 1 ανώνυμος ανώνυμος 285 Φεβ 7 03:08 000003.log -rw-r--r-- 1 ανώνυμος ανώνυμος 16 Φεβ 7 03:08 ΤΡΕΧΟΝ -rw-------- 1 ανώνυμος ανώνυμος 0 Φεβ 7 03:08 LOCK -rw-r--r-- 1 ανώνυμος ανώνυμος 46 Φεβρουαρίου 7 03:08 LOG -rw-r --r-- 1 ανώνυμος ανώνυμος 32 Φεβ 7 03:08 MANIFEST-000002

Μπορείτε να δείτε παραδείγματα χρήσης του IndexedDB στο δίκτυο προγραμματιστών Mozilla.

Η εισαγωγή μεγάλου αριθμού εγγραφών στο IndexedDB καλύπτεται στο stackoverflow.com.

Για να προσθέσετε στοιχεία στο IndexedDB, πρέπει να χρησιμοποιήσετε

indexedDB.db.transaction().objectStore().put())

Στο φάκελο βάσης δεδομένων IndexedDB, οι παλιές βάσεις δεδομένων αποθηκεύονται ως αρχεία .sst και οι νέες (τρέχουσες) ως αρχεία .log.

Η setVersion() έχει καταργηθεί. Αλλά υπάρχει ένα κόλπο εδώ [σχετικά με το onupgradeneed()]: ...

Όπως αναφέρεται στο ιστολόγιο του Parashuram Narasimhan, "Για το Chrome: Στην περίπτωση του chrome, η συνάρτηση onupgradeneeded δεν καλείται. Η συνάρτηση onsuccess της βάσης δεδομένων καλείται. Εδώ, ελέγχεται η ύπαρξη της μεθόδου setVersion. Εάν η μέθοδος υπάρχει και η καθορισμένη έκδοση είναι μεγαλύτερη από την έκδοση της βάσης δεδομένων, καλείται η μέθοδος setVersion. Η επιτυχία της κλήσης αιτήματος του setVersion καλεί την αναβαθμισμένη μέθοδο του χρήστη με τη συναλλαγή έκδοσης. Μόλις ολοκληρωθεί η μέθοδος, η έκδοσηTransaction δεσμεύεται με το κλείσιμο της βάσης δεδομένων. Η βάση δεδομένων ανοίγει ξανά με την πιο πρόσφατη έκδοση και μεταβιβάζεται στο onsuccess που έχει ορίσει ο χρήστης." (έτσι για να καλέσετε την onupgradeneed(), κάνω db.setVersion("3")).

Τρόπος ανάκτησης δεδομένων στο content.js:

dbreq.onupgradeneeded = function(event) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "readonly"); var store = tx.objectStore("todo");

Για να ανοίξετε τη βάση δεδομένων, χρησιμοποιήστε τον κώδικα από axemclion+jepp (συνάρτηση openReqShim).

Όταν ανοίγουμε μια βάση δεδομένων IndexedDB που δεν υπάρχει, θα δημιουργηθεί με αριθμό έκδοσης, έκδοση = 0. Σε αυτήν την περίπτωση, η onupgradeneeded() και η onsuccess() καλούνται διαδοχικά. Την πρώτη φορά που καλούμε onupgradeneed(), η έκδοση είναι ήδη = 1. Όταν ανοίγουμε την [υπάρχουσα βάση δεδομένων] για δεύτερη φορά, η onupgradeneeded() δεν καλείται πλέον και ο αριθμός έκδοσης = 1. (;δεν αυξάνεται) Μόνο dbreq .onsuccess() καλείται.

Ακόμη ένα πράγμα. Λέει ότι "Με το Chrome πριν από τις 23, πρέπει να δημιουργήσετε μια τέτοια συναλλαγή με μη αυτόματο τρόπο καλώντας το setVersion() - ένα API που έχει αφαιρεθεί από την προδιαγραφή. Η παλαιότερη προδιαγραφή βρίσκεται στη διεύθυνση: http://www.w3. org /TR/2011/WD-IndexedDB-20110419/", δηλαδή, για να αποφύγετε το σφάλμα "NotFoundError: DOM IDBDatabase Exception 8" στα αρχεία καταγραφής του chrome, πρέπει να καλέσετε τη setVersion().

Στο Chromium 6.0.472.63 (59945) η υλοποίηση του IndexedDB δεν είναι σταθερή, επομένως είναι απενεργοποιημένη και δεν λειτουργεί =)

Γενικά, πρέπει να χρησιμοποιήσετε το background.js + iframe + ανταλλαγή με σενάρια περιεχομένου μέσω μηνυμάτων

Πώς να χειριστείτε το συμβάν ανοίγματος σελίδας;

"content_scripts": [ ( "ταιριάζει": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_start" ) ], ...

Content.js:

document.addEventListener("DOMContentLoaded", function () ( alert("Abc "+document.location.href); ));

Πώς να μορφοποιήσετε τον κώδικα HTML μιας σελίδας; Δείτε τη σύνταξη επεκτάσεων Firefox. Πώς να συσκευάσετε μια επέκταση και πού να την τοποθετήσετε;

Για να τοποθετήσετε μια επέκταση στο Chrome WebStore, πρέπει να πληρώσετε στην Google ένα τέλος εισόδου 5 $ (τότε μπορείτε να τοποθετήσετε οποιονδήποτε αριθμό επεκτάσεων). Μπορείτε να πληρώσετε μέσω VISA, MasterCard, AMEX ή DISCOVER (επιπλέον, κατά την πληρωμή, πρέπει να αναφέρετε την πλήρη ταχυδρομική σας διεύθυνση και το Όνομα και το Επώνυμό σας).

Για να τοποθετήσετε την επέκταση χρειάζεστε έναν λογαριασμό Google κ.ο.κ. Θα χρειαστείτε ένα στιγμιότυπο οθόνης και μια διαφημιστική εικόνα. Θα χρειαστεί να ενημερώσετε τον κωδικό επέκτασης χειροκίνητα, μέσω του ίδιου Chrome WebStore (όπως καταλαβαίνω, δεν υπάρχει αυτόματη ενημέρωση κατά URL, όπως στον Firefox). Στο αρχείο manifest.json, πρέπει να ενημερώσετε την έκδοση επέκτασης. Λίγα λεπτά μετά την προσθήκη, η επέκταση θα είναι διαθέσιμη στην αναζήτηση για επεκτάσεις Chrome.

Συσκευασία επέκτασης για Linux:

#!/bin/bash 7z a -tzip ../domainck-chromium.zip ./* mv ../domainck-chromium.zip ../domainck-chromium.crx

Λέξεις-κλειδιά: Κατασκευές Chromium για Windows HOWTO, Σελίδα λήψης Google Chrome, Δείγματα επεκτάσεων Google Chrome.

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

manifest.json

Το αρχείο που απαιτείται για την επέκταση του Google Chrome είναι manifest.jsonπου περιγράφει παραμέτρους, διαδρομές προς εξωτερικά αρχεία (*.js, *.css κ.λπ.), υποστήριξη έκδοσης κ.λπ. για επέκταση. Μπορείτε να διαβάσετε περισσότερα για το αρχείο. Στην περίπτωσή μας, το αρχείο manifest.json μοιάζει με αυτό:

( "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).scrollTop() > 400) $upButton.fadeIn("slow"); αλλιώς $upButton.fadeOut("slow"); )); ); var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ main +"))();")); (document.body || document.head document.documentElement).appendChild(script);

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

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

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

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

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

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

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

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

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

Συμπέρασμα

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