همه موارد موجود در فروشگاه وب Chrome به برنامه‌ها و برنامه‌های افزودنی تقسیم می‌شوند. ما هر دو را انجام خواهیم داد. برنامه ای که ایجاد می کنیم به عنوان یک نماد در یک برگه مرورگر جدید ظاهر می شود و به شما امکان می دهد تا سایت خود را به سرعت راه اندازی کنید. افزونه یک دکمه ویژه در نوار ابزار است که با کلیک بر روی آن، پانلی با آخرین به روز رسانی سایت ظاهر می شود.

ساخت اپلیکیشن برای گوگل کروم

1. آرشیو با قالب پسوند را از این لینک دانلود کنید.

2. آن را در هر مکان مناسب برای شما باز کنید. داخلش یه فایل هست manifest.jsonو نماد icon.png.

3. فایل را باز کنید manifest.jsonدر یک دفترچه یادداشت و محتوای آن را ویرایش کنید. باید نام سایت خود را در خط 2، توضیحات آن (حداکثر 132 کاراکتر) در خط 3 و آدرس سایت را در خطوط 5 و 7 وارد کنید. تغییرات ایجاد شده را ذخیره کنید.

4. آیکون را از آرشیو به تصویر خود با فرمت PNG با سایز 128*128 تغییر دهید.

ساخت افزونه برای گوگل کروم

اگرچه برنامه افزودنی از نظر عملکردی به طور قابل توجهی با برنامه کاربردی متفاوت است، الگوریتم مونتاژ آن خیلی پیچیده‌تر نیست.

1. قالب پسوند را از این لینک دریافت کنید.

2. از حالت فشرده خارج کنید. فایل manifest.json را در Notepad باز کنید و نام سایت خود، توضیحات مختصر آن و عنوان پنجره پسوند (خطوط 2، 3 و 8) را در آن قرار دهید.

3. فایل را باز کنید labnol.jsو آدرس فید RSS سایت خود را مشخص کنید.

4. آیکون آرشیو را با تصویر خود با فرمت PNG با سایز 128*128 جایگزین کنید.

انتشار

پسوند و اپلیکیشنی که ساختیم به دو صورت قابل استفاده است. اگر صاحب یک وب سایت هستید و می خواهید کاربران بیشتری را به آن جذب کنید، می توانید کار خود را در فروشگاه وب کروم منتشر کنید. برای انجام این کار، افزونه ها و فایل های افزودنی را در آرشیو خود بسته بندی کنید، به صفحه داشبورد کروم بروید و کار خود را در فروشگاه گوگل آپلود کنید. در اینجا از شما خواسته می شود که یک اسکرین شات آپلود کنید، یک توضیح گسترده ارائه دهید و برخی پارامترهای دیگر را مشخص کنید. این صفحه به زبان روسی است، بنابراین به راحتی می توانید آن را درک کنید. فقط توجه داشته باشید که برای انتشار یک افزونه، باید مالک تایید شده سایتی باشید که برای آن افزونه ایجاد کرده اید. علاوه بر این، برای هر نشریه باید 5 دلار هزینه ورودی وارد کنید.

اگر برنامه‌های افزودنی را فقط برای استفاده شخصی جمع‌آوری کرده‌اید، به‌عنوان مثال، برای نظارت راحت به‌روزرسانی‌های سایت مورد علاقه‌تان، کافی است صفحه برنامه‌های افزودنی را در مرورگر خود باز کنید و حالت برنامه‌نویس را فعال کنید. سپس روی دکمه کلیک کنید برنامه افزودنی بدون بسته بندی را دانلود کنیدو مسیر پوشه با فایل ها را مشخص کنید.

با استفاده از روش پیشنهادی، هر صاحب وب‌سایت یا وبلاگ می‌تواند یک افزونه مارک‌دار برای منبع خود در فهرست برنامه‌های افزودنی مرورگر Google Chrome ایجاد و قرار دهد. این به بازدیدکنندگان کمک می‌کند تا از آخرین به‌روزرسانی‌ها مطلع شوند، که بازدیدکنندگان بیشتری را به سایت شما می‌آورد و محبوبیت آن را افزایش می‌دهد.

من همیشه می خواستم در مورد فرصت های (فناوری) جالبی به مردم بگویم که ممکن است اکنون در دسترس همه باشد، اما به دلایلی برای همه در دسترس نیست. بله، معلوم شد که این یک توتولوژی است، اما به طور کامل خشم درونی من را از این موضوع سوزان برای من منعکس می کند. به هر حال، اکنون صحبت درباره نحوه بیان آنها نخواهد بود. امروز در مورد ایجاد برنامه های افزودنی برای مرورگر گوگل کروم (که از این پس کروم نامیده می شود) صحبت خواهیم کرد.

افزونه‌ای که در طول این مقاله توسعه خواهیم داد را می‌توانید در فروشگاه وب گوگل کروم پیدا کنید، با تنها تفاوت این که دارای عملکرد پیشرفته است. علاوه بر این، کد منبع در GitHub وجود دارد، باز هم با این نکته که همه چیز در CoffeeScript نوشته شده است و در اینجا داستان با جاوا اسکریپت نوشته می شود. به هر حال، من طرفدار یا حامی CoffeeScript نیستم، اما این یک چیز جالب و مفید است - به شما توصیه می کنم آن را امتحان کنید.

اگر تا به حال به ایده ایجاد افزونه برای مرورگرهای کروم، فایرفاکس، مکستون و سایر مرورگرها فکر کرده اید، احتمالاً قبلاً متوجه شده اید که حداقل تلاشی که باید انجام دهید برای کروم است. شما می توانید این را با مشاهده اسناد مربوط به مرورگرهای مربوطه تأیید کنید.

فرمول بندی مسئله

نوشتن یک افزونه با شرح آن و تعیین وظایفی که حل خواهد کرد آغاز می شود. از آنجایی که من رئیس خودم هستم و می توانم هر چند بار که بخواهم ضرب الاجل را از دست بدهم، نیازی به نوشتن مشخصات فنی ندارم - برای درک این موضوع کافی است:

• برنامه افزودنی باید تمام نظرات موجود در شبکه اجتماعی VK را پنهان کند.
• برنامه افزودنی باید بتواند نظرات را نمایش دهد.
• برنامه افزودنی باید بتواند نظرات را در صفحات خاص نمایش دهد.

در نگاه اول، همه چیز ساده است و ما می توانیم آن را انجام دهیم. با این حال، در چارچوب مقاله ما فقط دو نکته اول را اجرا خواهیم کرد.

من سوالاتی را پیش‌بینی می‌کنم که محتوای آنها ممکن است چیزی شبیه به این باشد: "چرا اگر هدف یک شبکه اجتماعی این است، نظرات را پنهان کنیم؟" خوب، این یک سوال منصفانه است که مستحق پاسخ دقیق است:

شرایط مشخص شده است که اخیراً وقتی نظراتی را در VK می بینم می خواهم کوه هایی از کف دست را به مفسران بدهم. من در تعداد زیادی از صفحات عمومی مختلف، موضوعی (توسعه وب) و نه چندان مشترک هستم. و مهم نیست که چقدر عجیب به نظر می رسد، من در گروه هایی با محتوایی که برای من جالب است و نه گربه ها (در مورد من پانداها) سخاوتمندترین می شوم. من تا به حال این حجم از اطلاعات غیرحرفه ای و زشت در کامنت ها در هیچ جای دیگری ندیده بودم و حتی به فکر دعوا هم می افتند. علاوه بر این، نظرات در فید خبری از نظر زیبایی شناسی خوشایند به نظر نمی رسند. به طور کلی گفته و انجام شده است.

قاب گسترش

خوشایندترین شگفتی برای من این بود که در همان ابتدای سفر با ماهیت توصیفی اعمال مواجه می شویم. به عبارت ساده، ما باید برنامه خود، حقوق و قابلیت های آن را شرح دهیم - فایل manifest.json برای این مورد استفاده می شود.

اول از همه، شما باید سه قسمت مورد نیاز را پر کنید:

( "manifest_version": 2، // شروع با Chrome 18 مجموعه 2، در غیر این صورت 1 (چنین موارد قدیمی پشتیبانی نمی شود) "name": "My Extension"، // نام برنامه افزودنی "version": "versionString" // نسخه برنامه افزودنی )

اگر همه چیز با نام مشخص است و نسخه مانیفست حتی ساده‌تر است، باید نگاه دقیق‌تری به نسخه افزونه بیندازید.

بنابراین، همه ما به این واقعیت عادت کرده‌ایم که نسخه‌ای از چیزی شامل سه عدد است که با نقطه از هم جدا شده‌اند - Major.Minor.Patch (به معنی عدد). با npm، bower و دیگر لذت‌ها، مکالمه کوتاه است: یا به این صورت یا اصلاً. اما گوگل گزینه های زیر را ارائه می دهد:

"نسخه": "1" "نسخه": "1.0" "نسخه": "2.10.2" "نسخه": "3.1.2.4567"

می‌توانید در مورد تمام فیلدهای فایل مانیفست از مستندات بیشتر بیاموزید.

در مورد ما، فایل مانیفست به شکل زیر خواهد بود:

( "manifest_version": 2، "name": "__MSG_app_name__"، "short_name": "VKCommentBlocker"، "description": "__MSG_app_description__"، "نسخه": "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.html")، "content_scripts": [ ("منطبق‌ها" : [ "http://vk.com/*"، "https://vk.com/*" ]، "css": [ "styles/commentblocker.css" ] ) ]، "web_accessible_resources": [ "styles /commentblocker_on.css" ] )

از آنچه قبلاً مورد توجه قرار نگرفته است

• __MSG_key__ برداشت کروم در مورد بین المللی سازی اپلیکیشن ها (i18n) است. هم در فایل مانیفست و هم در فایل های دیگر (حتی CSS) قابل استفاده است.
• web_accessible_resources - آرایه ای از مسیرهای منبع که متعاقباً در زمینه صفحات وب استفاده می شود. بدون مشخص کردن مسیر در آن، در صورتی که چنین رفتاری مورد انتظار باشد، نمی توان از هیچ چیز در صفحات وب سایت استفاده کرد.

منابع گسترش

یک مزیت بزرگ برای Chrome karma این است که اکنون می‌توانیم افزونه را فعال کنیم، البته اگر تمام منابع مشخص شده در manifest.json ایجاد شده باشند.

من فکر نمی کنم ارزش آن را داشته باشد که روی آنچه در فایل های commentblocker.css و commentblocker_on.css وجود دارد تمرکز کنیم. من فقط اولین مورد را ارائه می دهم که تمام انتخابگرهایی را که حاوی نظرات هستند لیست می کند:

@charset "utf-8"؛ .wall_module .reply_link_wrap .reply_link ( visibility: hidden !important; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_comments_wrap, #mv_comments_wrap, #mv_comments_your_comments نظر (نمایش: هیچ !مورچه وارداتی؛ مشاهده: پنهان مهمترین ;)

در فایل commentblocker_on.css، همانطور که ممکن است حدس بزنید، برعکس است. توجه داشته باشید که دقیقاً در CSS از خطی با محتوای کلید زبان استفاده می‌کنم: "__MSG_mode_enable__". وقت آن است که فایلی را ایجاد کنید که این کلیدها در آن ذخیره شوند.

در ریشه افزونه خود، دایرکتوری _locales و دایرکتوری های en و ru را که درون آن قرار گرفته اند ایجاد می کنیم. در مرحله بعد، کلیدهای خود را در فایل messages.json شرح می دهیم.

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": "روشی راحت برای پنهان کردن نظرات در فید خبری و گروه‌ها." ), "browser_action": ( "پیام" ": " تغییر نوع نظر" ), "mode_enable": ( "پیام": "بدون نظر!" ), "mode_disable": ( "پیام": "با نظرات!" ) )

علاوه بر فیلد پیام، فیلدهای دیگری نیز وجود دارد که می توانید از مستندات با آنها آشنا شوید.

حالا فایل‌های background.html را ابتدا به شکل زیر ایجاد می‌کنیم:

زمینه

همه چیز در اینجا مانند HTML معمولی است - هیچ چیز غیرعادی نیست. به هر حال، لازم نیست فایل background.html را ایجاد کنید، زیرا به طور خودکار بر اساس فیلدهای manifest.json ایجاد می شود.

راه اندازی پسوند

می توانید برنامه افزودنی را بدون نوشتن یک خط جاوا اسکریپت اجرا کنید. برای این کار باید منو را مرور کنید:

• راه اندازی و مدیریت گوگل کروم (همبرگر)
• ابزارهای اضافی
• برنامه های افزودنی
• کادر کنار «حالت برنامه‌نویس» را علامت بزنید
• برنامه افزودنی بدون بسته بندی را دانلود کنید
• پوشه با پسوند را انتخاب کنید

برنامه افزودنی بارگیری شد و در منو ظاهر شد. بله، بله، این "B" است.

به نظر می رسد پسوندی که ما ایجاد کردیم چیزی در سر ندارد (منطقی وجود ندارد) و همه نظرات در صفحات شبکه اجتماعی با حرف "B" اکنون پنهان شده است. پاسخ در manifest.json نهفته است، جایی که در قسمت "content_scripts": () نشان دادیم که فایل commentblocker.css در کدام صفحات (http://vk.com/* و https://vk.com/*) قرار می گیرد. به طور خودکار گنجانده شود، که همه نظرات را پنهان می کند. به شما توصیه می کنم در مورد الگوهای ریاضی بیشتر بخوانید. از نظر ظاهری بسیار ساده است، اما زیر کاپوت تقریباً ژل خاکستری است، با همه زنگ ها و سوت ها.

بنابراین، بدون نوشتن یک خط کد، از قبل یک افزونه داریم که وظیفه اصلی را انجام می دهد.

احیای گسترش

باقی مانده است که نقطه دوم کار، یعنی پیاده سازی قابلیت نمایش نظرات، تکمیل شود. به طور خلاصه، ما باید یک فایل commentblocker_on.css را فشار دهیم، که قوانین فایل commentblocker.css را لغو می کند. و در اینجا جاوا اسکریپت قادر متعال ما به کمک ما می شتابد.

یادت هست در مورد background.html چه گفتم؟ بله، بله، در مورد این واقعیت که لازم نیست ایجاد شود. بیایید manifest.json را کمی تغییر دهیم:

... "پس زمینه": ( "مداوم": نادرست، "اسکریپت ها": [ "scripts/commentblocker.js" ])، ...

فقط فایل جاوا اسکریپت را وصل کرد. چیز خاصی نیست. بریم سراغ این فایل.

شما نمی توانید فقط JS را در یک صفحه قرار دهید. و همین مشکل نه تنها در مورد اسکریپت ها وجود دارد. بنابراین، باید از یک تزریق ویژه executeScript استفاده کنیم.

ابتدا باید یک کنترل کننده رویداد کلیک را به نماد برنامه افزودنی اضافه کنید:

Chrome.browserAction.onClicked.addListener(function(tab) ( chrome.tabs.executeScript(tab.id, ( کد: "(" + 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 که در دسترس است

معتبرترین افراد در این زمینه ولادیمیر پالانت هستند (او AdBlock Plus نوشت)، ... نوشتن برنامه های افزودنی برای کروم راحت تر از فایرفاکس است. جالب توجه است، محبوب ترین افزونه برای 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

Where is manifest.json:

( "manifest_version": 2، "name": "پسوند DomainCheck"، "نسخه": "0.1"، "background": ( "scripts": ["background.js"])، "content_scripts": [ ( "مطابقات ": [ "*://*/*" ], "js": [ "content..png" ) // no web_accessible_resources )

فایل background.js حاوی کدی است که هنگام شروع مرورگر اجرا می شود. در این اسکریپت می توانید کنترل کننده بارگیری محتوای سند (document.location.href) را "آویز" کنید.

خود کروم _generated_background_page.html را تولید می کند:

برای برقراری ارتباط بین background.js و اسکریپت محتوا، می‌توانید از پیام‌ها (درخواست/پیام) و ()chrome.extension.getBackgroundPage استفاده کنید. همچنین نمای کلی معماری افزونه‌های کروم را ببینید. می گوید که "اسکریپت محتوا مقداری جاوا اسکریپت است که در متن صفحه ای که در مرورگر بارگذاری شده است اجرا می شود".

توجه: اشکال زدایی صفحه پس زمینه (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 بسته شد، اما هنوز در آخرین بیلدهای ویندوز ظاهر نشده است.

اگر هنوز تصمیم به استفاده از آلارم‌های "مدرن" دارید، نحوه تنظیم صحیح تایمر زنگ با مدت زمان/دوره دلخواه در stackoverflow.com توضیح داده شده است.

برای سازگاری با مرورگرهای قدیمی، بهتر است از window.setInterval() در background.js استفاده کنید:

var i = 0; window.setInterval(function() ( alert(i); i++), 2*1000); // در میلی ثانیه

تابع setTimeout() یک "ساعت زنگ دار" است.

غیرفعال کردن-فعال کردن افزونه‌های کروم 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، ... "مجوزها": [ "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/*" ],

برای جلوگیری از شکایت بازرس وب (؟) در کروم از XMLHttpRequest() وقتی اینترنت خاموش است، می‌توانید این کار را انجام دهید:

var req = null; امتحان کنید ( req = new XMLHttpRequest(); ) catch(err) () // به مشاوره در stackoverflow.com مراجعه کنید

(این به توصیه stackoverflow.com نوشته شده است). ...

برای رفع اشکال تجزیه، می توانید از console.log ("line") استفاده کنید. رشته‌ها با استفاده از «\n»، بازگشت‌های حامل را می‌پذیرند.

تجزیه XML به جاوا اسکریپت در پسوند کروم به این صورت انجام می شود:

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"); if (ds) (برای (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

چگونه از متغیرهای اتمی جهانی و داده های جدول در افزونه کروم استفاده کنیم؟

برای همگام‌سازی داده‌های برنامه افزودنی با استفاده از Storage API، به نسخه Chrome >= 20 نیاز دارید. در مانیفست (manifest.json) باید موارد زیر را بنویسید:

"premissions": ["storage" ]

همانطور که آنها در گروه گوگل "Chromium HTML5" می نویسند، "من توجه خود را به پایگاه داده Web SQL معطوف کردم، اما به نظر می رسد Web SQL دیگر در "تعمیر و نگهداری فعال" نیست و من را به این باور می رساند که از مشخصات HTML حذف خواهد شد." برای جزئیات بیشتر به پایگاه داده W3C Web SQL مراجعه کنید. می توانید از مفاهیم پایه استفاده کنید - برای گسترش فضای پایگاه داده، می توانید از مجوزها استفاده کنید: unlimitedStorage در manifest.json. برای استفاده از "فضای ذخیره سازی نامحدود" API های آفلاین زیر وجود دارد: 1) کش برنامه. 2) سیستم فایل؛ 3) IndexedDB. 4) WebSQL (منسوخ شده). برای مثال استفاده از IndexedDB در کروم، نگاه کنید. برای مثالی از کار با IndexedDB، به gist.github.com مراجعه کنید:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("db my") req.onerror = function() (consol.log("خطا");)

مکان های فایل IndexedDB،
Windows: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\IndexedDB,
لینوکس: /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 24 drwx------- 2 4006 ناشناس drwx------ 3 ناشناس ناشناس 4096 7 فوریه 03:08 .. -rw-r--r-- 1 ناشناس ناشناس 285 فوریه 7 03:08 000003.log -rw-r--r-- 1 ناشناس ناشناس 16 فوریه 7 03:08 CURRENT -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 در شبکه توسعه دهنده موزیلا نگاه کنید.

درج تعداد زیادی رکورد در IndexedDB در stackoverflow.com پوشش داده شده است.

برای افزودن موارد به IndexedDB، باید از آن استفاده کنید

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

در پوشه پایگاه داده IndexedDB، پایگاه داده های قدیمی به عنوان فایل های .sst و پایگاه های جدید (جاری) به عنوان فایل های .log ذخیره می شوند.

setVersion() منسوخ شده است. اما یک ترفند اینجا [درباره onupgradeneeded()] وجود دارد: ...

همانطور که در وبلاگ Parashuram Narasimhan آمده است، "برای کروم: در مورد کروم، تابع onupgradeneed فراخوانی نمی شود. تابع onsuccess پایگاه داده فراخوانی می شود. در اینجا وجود متد setVersion بررسی می شود. اگر متد وجود داشته باشد و نسخه مشخص شده بزرگتر از نسخه پایگاه داده باشد، متد setVersion فراخوانی می شود. با موفقیت فراخوانی درخواست setVersion، روش ارتقا یافته کاربر را با تراکنش نسخه فراخوانی می کند. پس از تکمیل روش، نسخه Transaction با بستن پایگاه داده متعهد می شود. پایگاه داده دوباره با آخرین نسخه باز می شود و به onsuccess تعریف شده توسط کاربر منتقل می شود." (بنابراین برای فراخوانی onupgradeneeded()، db.setVersion ("3") را انجام می دهم).

نحوه واکشی داده ها در content.js:

dbreq.onupgradeneeded = تابع(رویداد) ( console.log("dbreq.onupgradeneed")؛ var db = event.target.result؛ var tx = db.transaction(["test_db"]، "تنها خواندن"); var store = tx.objectStore("todo");

برای باز کردن پایگاه داده، از کد axemclion+jepp (تابع openReqShim) استفاده کنید.

وقتی یک پایگاه داده IndexedDB را باز می کنیم که وجود ندارد، با شماره نسخه، نسخه = 0 ایجاد می شود. در این حالت، onupgradeneeded() و onsuccess() به ترتیب فراخوانی می شوند. اولین باری که onupgradeneeded() را فراخوانی می کنیم، نسخه قبلاً = 1 است. وقتی برای بار دوم [پایگاه داده موجود] را باز می کنیم، دیگر onupgradeneeded() فراخوانی نمی شود و شماره نسخه = 1. (?افزایش نمی یابد) فقط dbreq .onsuccess() فراخوانی می شود.

یک چیز دیگر. می گوید که "با Chrome قبل از 23، باید چنین تراکنشی را به صورت دستی با فراخوانی setVersion() ایجاد کنید - یک API که از مشخصات حذف شده است. مشخصات قدیمی را می توانید در آدرس زیر پیدا کنید: http://www.w3. org /TR/2011/WD-IndexedDB-20110419/، یعنی برای جلوگیری از خطای «NotFoundError: DOM IDBDatabase Exception 8» در گزارش‌های کروم، باید setVersion() را فراخوانی کنید.

در Chromium 6.0.472.63 (59945) پیاده سازی IndexedDB پایدار نیست، بنابراین غیرفعال است و کار نمی کند =)

به طور کلی، باید از background.js + iframe + تبادل با اسکریپت های محتوا از طریق پیام استفاده کنید

چگونه رویداد باز شدن صفحه را مدیریت کنیم؟

"content_scripts": [ ( "Match": [ "*://*/*" ]، "js": [ "content.js" ]، "run_at": "document_start" ) ]، ...

Content.js:

document.addEventListener("DOMContentLoaded"، تابع () ( alert("Abc"+document.location.href); ));

چگونه کد HTML یک صفحه را قالب بندی کنیم؟ نوشتن افزونه های فایرفاکس را ببینید. چگونه یک افزونه را بسته بندی کنیم و کجا قرار دهیم؟

برای قرار دادن یک برنامه افزودنی در فروشگاه وب کروم، باید 5 دلار هزینه ورودی به گوگل بپردازید (سپس می توانید هر تعداد افزونه را قرار دهید). شما می توانید از طریق VISA، MasterCard، AMEX یا DISCOVER پرداخت کنید (علاوه بر این، هنگام پرداخت باید آدرس پستی کامل و نام و نام خانوادگی خود را ذکر کنید).

برای قرار دادن برنامه افزودنی به یک حساب Google و غیره نیاز دارید. شما به یک اسکرین شات و یک تصویر تبلیغاتی نیاز دارید. شما باید کد برنامه افزودنی را به صورت دستی و از طریق همان فروشگاه وب کروم به روز کنید (همانطور که متوجه شدم، مانند فایرفاکس به‌روزرسانی خودکار از طریق URL وجود ندارد). در فایل manifest.json، باید نسخه افزونه را به روز کنید. چند دقیقه پس از افزودن، افزونه در جستجوی افزونه‌های کروم در دسترس خواهد بود.

بسته بندی افزونه برای لینوکس:

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

کلید واژه ها: بیلدهای کرومیوم برای ویندوز HOWTO، صفحه دانلود گوگل کروم، نمونه برنامه افزودنی گوگل کروم

سایت های زیادی در اینترنت وجود دارند که امکان اسکرول کردن صفحه را بدون استفاده از ماوس یا نوار اسکرول فراهم می کنند. اما در عین حال هنوز سایت هایی هستند که چنین پیاده سازی در آنها وجود ندارد. "چرا سعی نمی کنید اسکریپتی بنویسید که چنین دکمه ای را به همه سایت ها اضافه کند؟" - فکر کردم و دست به کار شدم. این گونه اسکریپت ها اسکریپت های کاربر نامیده می شوند و دارای پسوند *.user.js هستند. به عنوان مثال، می توانید آن را در Habré بخوانید. متأسفانه این کار را نمی توان بدون مشکلات انجام داد. تفاوت هایی در پیاده سازی userjs برای مرورگرهای مختلف وجود دارد. من بر روی توصیف اجرای اسکریپت userjs خود به عنوان یک افزونه برای مرورگر Google Chrome تمرکز خواهم کرد.

manifest.json

فایل مورد نیاز برای پسوند گوگل کروم است 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" ]، "Match": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true، "description": "پسوند کاربر اسکریپت بالای صفحه برای google chrome"، "name": "backTopUserJS"، "نسخه": "1" )

برای راحتی، از کتابخانه JQuery استفاده می کنیم که آن را در کنار فایل manifest.json و فایل اسکریپت اصلی (در مورد ما، backTopUserJS.user.js) قرار می دهیم. مطالب آن به شرح زیر است:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @version 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 () (اگر ($(window).scrollTop() > 400) $upButton.fadeIn("آهسته")؛ در غیر این صورت $upButton.fadeOut("کند"); ))؛؛ var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ main +"))();")); (document.body || document.head document.documentElement).appendChild(script);

من فکر می کنم فیلمنامه به اندازه کافی واضح است که بتوان جزئیات را در نظر گرفت. فقط 3 خط آخر ارزش توضیح دارد. در واقع، این یک هک کوچک است که اسکریپت ما را در کد صفحه سایت قرار می دهد. اگر هر یک از شما راه بهتری پیدا کرد، می توانید اصلاحات خود را در نظرات بنویسید :)

نصب افزونه در مرورگر

می‌توانید اسکریپت‌های سفارشی را در Google Chrome نصب کنید، مانند سایر مرورگرها، اما از آنجایی که Google به امنیت ما اهمیت می‌دهد، آنها باید در برنامه‌های افزودنی مرورگر پیچیده شوند. بیایید مرحله به مرحله نصب را بررسی کنیم.

یک پوشه برای افزونه ما مانند این ایجاد کنید: C:\MyChromeExtensionUserJS

برای هر برنامه افزودنی ما دایرکتوری خود را ایجاد می کنیم، به عنوان مثال در مورد ما آن را C:\MyChromeExtensionUserJS\backTopUserJS می نامیم. فایل های افزونه را به این دایرکتوری اضافه کنید.

به "درباره مرورگر گوگل کروم" -> تب "برنامه‌های افزودنی" بروید یا chrome://extensions/ را در نوار آدرس بنویسید.

کادر «حالت برنامه‌نویس» را علامت بزنید

روی دکمه "بارگیری برنامه افزودنی بدون بسته بندی" کلیک کنید و دایرکتوری برنامه افزودنی ما را انتخاب کنید. روی "OK" کلیک کنید.

برنامه افزودنی نصب شده و آماده استفاده است. برای به‌روزرسانی برنامه‌های افزودنی پس از ایجاد تغییرات در آن، به سادگی روی دکمه «به‌روزرسانی افزونه» کلیک کنید یا در حالت برنامه‌نویس، میانبر صفحه‌کلید Ctrl+R را فشار دهید.

خط پایین

می توانید منابع اسکریپت را در github مشاهده کنید. این اسکریپت ادعا نمی کند که ایده آل است، اما تنها به عنوان یک نمونه و انگیزه برای نوشتن اسکریپت های سفارشی خود برای Google Chrome عمل می کند.