chrome.browserAction (original) (raw)
বর্ণনা
ঠিকানা বারের ডানদিকে প্রধান Google Chrome টুলবারে আইকন রাখতে ব্রাউজার অ্যাকশন ব্যবহার করুন। এর আইকন ছাড়াও, একটি ব্রাউজার অ্যাকশনে একটি টুলটিপ , একটি ব্যাজ এবং একটি পপআপ থাকতে পারে।
প্রাপ্যতা
নিচের চিত্রে, ঠিকানা বারের ডানদিকের বহুরঙা বর্গক্ষেত্রটি একটি ব্রাউজার অ্যাকশনের আইকন। আইকনের নীচে একটি পপআপ রয়েছে।

আপনি যদি এমন একটি আইকন তৈরি করতে চান যা সবসময় সক্রিয় থাকে না, তাহলে ব্রাউজার অ্যাকশনের পরিবর্তে একটি পৃষ্ঠা অ্যাকশন ব্যবহার করুন।
উদ্ভাসিত
এইভাবে এক্সটেনশন ম্যানিফেস্টে আপনার ব্রাউজার অ্যাকশন নিবন্ধন করুন:
{
"name": "My extension",
...
"browser_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
"default_title": "Google Mail", // optional, shown in tooltip
"default_popup": "popup.html" // optional
},
...
}
আপনি Chrome-এ ব্যবহার করার জন্য যেকোনো আকারের আইকন প্রদান করতে পারেন এবং Chrome নিকটতমটি নির্বাচন করবে এবং 16-ডিপ স্পেস পূরণ করতে এটিকে উপযুক্ত আকারে স্কেল করবে। যাইহোক, যদি সঠিক আকার প্রদান না করা হয়, তাহলে এই স্কেলিং আইকনটি বিশদ হারাতে বা অস্পষ্ট দেখাতে পারে।
যেহেতু 1.5x বা 1.2x এর মতো কম-সাধারণ স্কেল ফ্যাক্টর সহ ডিভাইসগুলি আরও সাধারণ হয়ে উঠছে, তাই আপনাকে আপনার আইকনগুলির জন্য একাধিক মাপ প্রদান করতে উত্সাহিত করা হচ্ছে৷ এটি নিশ্চিত করে যে আইকন প্রদর্শনের আকার কখনও পরিবর্তন করা হলে, আপনাকে বিভিন্ন আইকন প্রদানের জন্য আর কোন কাজ করতে হবে না!
ডিফল্ট আইকন নিবন্ধন করার জন্য পুরানো সিনট্যাক্স এখনও সমর্থিত:
{
"name": "My extension",
...
"browser_action": {
...
"default_icon": "images/icon32.png" // optional
// equivalent to "default_icon": { "32": "images/icon32.png" }
},
...
}
UI এর অংশ
একটি ব্রাউজার অ্যাকশনে একটি আইকন , একটি টুলটিপ , একটি ব্যাজ এবং একটি পপআপ থাকতে পারে।
আইকন
ক্রোমের ব্রাউজার অ্যাকশন আইকনগুলি 16 ডিপস (ডিভাইস-স্বাধীন পিক্সেল) চওড়া এবং উচ্চ। বৃহত্তর আইকনগুলি ফিট করার জন্য পুনরায় আকার দেওয়া হয়, তবে সেরা ফলাফলের জন্য, একটি 16-ডিপ বর্গাকার আইকন ব্যবহার করুন৷
আপনি দুটি উপায়ে আইকন সেট করতে পারেন: একটি স্ট্যাটিক ইমেজ ব্যবহার করে বা HTML5 ক্যানভাস উপাদান ব্যবহার করে। স্ট্যাটিক ইমেজ ব্যবহার করা সাধারণ অ্যাপ্লিকেশনের জন্য সহজ, কিন্তু আপনি ক্যানভাস উপাদান ব্যবহার করে আরো গতিশীল UI তৈরি করতে পারেন—যেমন মসৃণ অ্যানিমেশন।
স্ট্যাটিক ইমেজ BMP, GIF, ICO, JPEG, বা PNG সহ ওয়েবকিট প্রদর্শন করতে পারে এমন যেকোনো বিন্যাসে হতে পারে। আনপ্যাক করা এক্সটেনশনগুলির জন্য, ছবিগুলি PNG ফর্ম্যাটে হওয়া আবশ্যক৷
আইকন সেট করতে, ম্যানিফেস্টে browser_action- এর default_icon ক্ষেত্রটি ব্যবহার করুন বা browserAction.setIcon পদ্ধতিতে কল করুন।
স্ক্রীন পিক্সেল ঘনত্ব (অনুপাত size_in_pixel / size_in_dip ) 1 থেকে ভিন্ন হলে আইকনটি সঠিকভাবে প্রদর্শন করতে, আইকনটিকে বিভিন্ন আকারের চিত্রগুলির সেট হিসাবে সংজ্ঞায়িত করা যেতে পারে। প্রদর্শনের জন্য প্রকৃত চিত্রটি 16 ডিপের পিক্সেল আকারের সাথে সেরা ফিট করার জন্য সেট থেকে নির্বাচন করা হবে। আইকন সেটে যেকোনো আকারের আইকন স্পেসিফিকেশন থাকতে পারে এবং Chrome সবচেয়ে উপযুক্ত একটি নির্বাচন করবে।
টুলটিপ
টুলটিপ সেট করতে, ম্যানিফেস্টে browser_action- এর default_title ক্ষেত্রটি ব্যবহার করুন বা browserAction.setTitle পদ্ধতিতে কল করুন। আপনি default_title ক্ষেত্রের জন্য লোকেল-নির্দিষ্ট স্ট্রিং নির্দিষ্ট করতে পারেন; বিস্তারিত জানার জন্য আন্তর্জাতিকীকরণ দেখুন।
ব্যাজ
ব্রাউজার ক্রিয়াগুলি ঐচ্ছিকভাবে একটি ব্যাজ প্রদর্শন করতে পারে — আইকনের উপরে স্তরযুক্ত কিছু পাঠ্য। ব্যাজগুলি এক্সটেনশনের অবস্থা সম্পর্কে অল্প পরিমাণ তথ্য প্রদর্শন করতে ব্রাউজার অ্যাকশন আপডেট করা সহজ করে।
কারণ ব্যাজটিতে সীমিত স্থান রয়েছে, এতে 4টি বা তার কম অক্ষর থাকা উচিত।
যথাক্রমে browserAction.setBadgeText এবং browserAction.setBadgeBackgroundColor ব্যবহার করে ব্যাজের পাঠ্য এবং রঙ সেট করুন।
যদি একটি ব্রাউজার অ্যাকশনে একটি পপআপ থাকে, ব্যবহারকারী যখন এক্সটেনশনের আইকনে ক্লিক করেন তখন পপআপটি উপস্থিত হয়৷ পপআপে আপনার পছন্দের যেকোনো HTML বিষয়বস্তু থাকতে পারে এবং এটি স্বয়ংক্রিয়ভাবে এর বিষয়বস্তুর সাথে মানানসই আকার ধারণ করে। পপআপ 25x25 এর চেয়ে ছোট হতে পারে না এবং 800x600 এর চেয়ে বড় হতে পারে না।
আপনার ব্রাউজার অ্যাকশনে একটি পপআপ যোগ করতে, পপআপের বিষয়বস্তু সহ একটি HTML ফাইল তৈরি করুন। ম্যানিফেস্টে browser_action- এর default_popup ক্ষেত্রে HTML ফাইলটি নির্দিষ্ট করুন, অথবা browserAction.setPopup পদ্ধতিতে কল করুন।
টিপস
সেরা চাক্ষুষ প্রভাবের জন্য, এই নির্দেশিকাগুলি অনুসরণ করুন:
- বেশিরভাগ পৃষ্ঠায় উপলব্ধি করে এমন বৈশিষ্ট্যগুলির জন্য ব্রাউজার ক্রিয়াগুলি ব্যবহার করুন ৷
- শুধুমাত্র কয়েকটি পৃষ্ঠার জন্য অর্থপূর্ণ বৈশিষ্ট্যগুলির জন্য ব্রাউজার ক্রিয়াগুলি ব্যবহার করবেন না ৷ পরিবর্তে পৃষ্ঠা কর্ম ব্যবহার করুন.
- বড়, রঙিন আইকনগুলি ব্যবহার করুন যা 16x16-ডিপ স্পেসের সবচেয়ে বেশি ব্যবহার করে৷ ব্রাউজার অ্যাকশন আইকনগুলিকে পৃষ্ঠা অ্যাকশন আইকনগুলির তুলনায় একটু বড় এবং ভারী মনে হওয়া উচিত।
- Google Chrome এর একরঙা মেনু আইকন অনুকরণ করার চেষ্টা করবেন না । এটি থিমগুলির সাথে ভাল কাজ করে না এবং যাইহোক, এক্সটেনশনগুলিকে একটু আলাদা করা উচিত৷
- আপনার আইকনে নরম প্রান্ত যোগ করতে আলফা স্বচ্ছতা ব্যবহার করুন । যেহেতু অনেক লোক থিম ব্যবহার করে, আপনার আইকনটি বিভিন্ন পটভূমির রঙে সুন্দর দেখা উচিত।
- ক্রমাগত আপনার আইকন অ্যানিমেট করবেন না . যে শুধু বিরক্তিকর.
উদাহরণ
আপনি উদাহরণ/api/browserAction ডিরেক্টরিতে ব্রাউজার অ্যাকশন ব্যবহার করার সহজ উদাহরণ পেতে পারেন। অন্যান্য উদাহরণের জন্য এবং উত্স কোড দেখতে সাহায্যের জন্য, নমুনা দেখুন।
প্রকারভেদ
TabDetails
বৈশিষ্ট্য
- ক্যোয়ারী করার জন্য ট্যাবের আইডি যদি কোন ট্যাব নির্দিষ্ট করা না থাকে, অ-ট্যাব-নির্দিষ্ট অবস্থা ফেরত দেওয়া হয়।
পদ্ধতি
disable()
chrome.browserAction.disable(
tabId?: number,
callback?: function,
): Promise
একটি ট্যাবের জন্য ব্রাউজার অ্যাকশন নিষ্ক্রিয় করে।
পরামিতি
- ট্যাবের আইডি যার জন্য ব্রাউজার অ্যাকশন পরিবর্তন করতে হবে।
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
() => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
enable()
chrome.browserAction.enable(
tabId?: number,
callback?: function,
): Promise
একটি ট্যাবের জন্য ব্রাউজার অ্যাকশন সক্ষম করে। ডিফল্ট সক্রিয় করতে.
পরামিতি
- ট্যাবের আইডি যার জন্য ব্রাউজার অ্যাকশন পরিবর্তন করতে হবে।
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
() => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
getBadgeBackgroundColor()
chrome.browserAction.getBadgeBackgroundColor(
details: TabDetails,
callback?: function,
): Promise<extensionTypes.ColorArray>
ব্রাউজার অ্যাকশনের পটভূমির রঙ পায়।
পরামিতি
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
(result: ColorArray) => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
getBadgeText()
chrome.browserAction.getBadgeText(
details: TabDetails,
callback?: function,
): Promise
ব্রাউজার অ্যাকশনের ব্যাজ টেক্সট পায়। যদি কোনো ট্যাব নির্দিষ্ট করা না থাকে, অ-ট্যাব-নির্দিষ্ট ব্যাজ টেক্সট ফেরত দেওয়া হয়।
পরামিতি
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
(result: string) => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
chrome.browserAction.getPopup(
details: TabDetails,
callback?: function,
): Promise
এই ব্রাউজার অ্যাকশনের জন্য পপআপ হিসেবে সেট করা HTML ডকুমেন্ট পায়।
পরামিতি
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
(result: string) => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
getTitle()
chrome.browserAction.getTitle(
details: TabDetails,
callback?: function,
): Promise
ব্রাউজার অ্যাকশনের শিরোনাম পায়।
পরামিতি
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
(result: string) => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
setBadgeBackgroundColor()
chrome.browserAction.setBadgeBackgroundColor(
details: object,
callback?: function,
): Promise
ব্যাজের জন্য পটভূমির রঙ সেট করে।
পরামিতি
- 0-255 রেঞ্জের মধ্যে চারটি পূর্ণসংখ্যার একটি অ্যারে যা ব্যাজের RGBA রঙ তৈরি করে। এছাড়াও একটি CSS হেক্স রঙ মান সহ একটি স্ট্রিং হতে পারে; উদাহরণস্বরূপ,
#FF0000বা#F00(লাল)। সম্পূর্ণ অস্বচ্ছতায় রং রেন্ডার করে। - যখন একটি নির্দিষ্ট ট্যাব নির্বাচন করা হয় তখন পরিবর্তন সীমিত করে। ট্যাব বন্ধ হয়ে গেলে স্বয়ংক্রিয়ভাবে রিসেট হয়।
- 0-255 রেঞ্জের মধ্যে চারটি পূর্ণসংখ্যার একটি অ্যারে যা ব্যাজের RGBA রঙ তৈরি করে। এছাড়াও একটি CSS হেক্স রঙ মান সহ একটি স্ট্রিং হতে পারে; উদাহরণস্বরূপ,
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
() => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
setBadgeText()
chrome.browserAction.setBadgeText(
details: object,
callback?: function,
): Promise
ব্রাউজার অ্যাকশনের জন্য ব্যাজ টেক্সট সেট করে। ব্যাজটি আইকনের উপরে প্রদর্শিত হয়।
পরামিতি
- যখন একটি নির্দিষ্ট ট্যাব নির্বাচন করা হয় তখন পরিবর্তন সীমিত করে। ট্যাব বন্ধ হয়ে গেলে স্বয়ংক্রিয়ভাবে রিসেট হয়।
- যেকোন সংখ্যক অক্ষর পাস করা যেতে পারে, কিন্তু মাত্র চারটি স্থানের মধ্যে ফিট করতে পারে। যদি একটি খালি স্ট্রিং (
'') পাস করা হয়, ব্যাজ পাঠ্যটি সাফ করা হয়। যদিtabIdনির্দিষ্ট করা থাকে এবংtextনাল থাকে, তাহলে নির্দিষ্ট ট্যাবের জন্য টেক্সট সাফ করা হয় এবং গ্লোবাল ব্যাজ টেক্সটে ডিফল্ট হয়।
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
() => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
setIcon()
chrome.browserAction.setIcon(
details: object,
callback?: function,
): Promise
ব্রাউজার অ্যাকশনের জন্য আইকন সেট করে। আইকনটিকে একটি ইমেজ ফাইলের পথ হিসাবে, একটি ক্যানভাস উপাদান থেকে পিক্সেল ডেটা হিসাবে বা এর মধ্যে একটির অভিধান হিসাবে নির্দিষ্ট করা যেতে পারে। হয় path বা imageData বৈশিষ্ট্য নির্দিষ্ট করা আবশ্যক।
পরামিতি
- imageData
ইমেজডেটা | বস্তু ঐচ্ছিক
হয় একটি ImageData অবজেক্ট বা একটি অভিধান {size -> ImageData} সেট করা একটি আইকন প্রতিনিধিত্ব করে৷ যদি আইকনটি একটি অভিধান হিসাবে নির্দিষ্ট করা হয়, ব্যবহৃত চিত্রটি পর্দার পিক্সেল ঘনত্বের উপর নির্ভর করে বেছে নেওয়া হয়। যদি একটি স্ক্রীন স্পেস ইউনিটে ফিট করা ছবির পিক্সেলের সংখ্যাscaleসমান হয়, তাহলে সাইজscale* n সহ একটি চিত্র নির্বাচন করা হয়, যেখানে n হল UI-তে আইকনের আকার। অন্তত একটি ছবি নির্দিষ্ট করা আবশ্যক। মনে রাখবেন যে 'details.imageData = foo' 'details.imageData = {'16': foo}' এর সমতুল্য। - পথ
স্ট্রিং | বস্তু ঐচ্ছিক
হয় একটি আপেক্ষিক ইমেজ পাথ বা একটি অভিধান {size -> আপেক্ষিক ইমেজ পাথ} একটি আইকন সেট করতে নির্দেশ করে৷ যদি আইকনটি একটি অভিধান হিসাবে নির্দিষ্ট করা হয়, ব্যবহৃত চিত্রটি পর্দার পিক্সেল ঘনত্বের উপর নির্ভর করে বেছে নেওয়া হয়। যদি একটি স্ক্রীন স্পেস ইউনিটে ফিট করা ছবির পিক্সেলের সংখ্যাscaleসমান হয়, তাহলে সাইজscale* n সহ একটি চিত্র নির্বাচন করা হয়, যেখানে n হল UI-তে আইকনের আকার। অন্তত একটি ছবি নির্দিষ্ট করা আবশ্যক। মনে রাখবেন যে 'details.path = foo' 'details.path = {'16': foo}' এর সমতুল্য - যখন একটি নির্দিষ্ট ট্যাব নির্বাচন করা হয় তখন পরিবর্তন সীমিত করে। ট্যাব বন্ধ হয়ে গেলে স্বয়ংক্রিয়ভাবে রিসেট হয়।
- imageData
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
() => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
chrome.browserAction.setPopup(
details: object,
callback?: function,
): Promise
ব্যবহারকারী ব্রাউজার অ্যাকশন আইকনে ক্লিক করলে HTML ডকুমেন্টকে পপআপ হিসেবে খোলার জন্য সেট করে।
পরামিতি
- একটি পপআপে দেখানোর জন্য HTML ফাইলের আপেক্ষিক পথ। যদি খালি স্ট্রিং (
'') তে সেট করা হয় তবে কোনো পপআপ দেখানো হয় না। - যখন একটি নির্দিষ্ট ট্যাব নির্বাচন করা হয় তখন পরিবর্তন সীমিত করে। ট্যাব বন্ধ হয়ে গেলে স্বয়ংক্রিয়ভাবে রিসেট হয়।
- একটি পপআপে দেখানোর জন্য HTML ফাইলের আপেক্ষিক পথ। যদি খালি স্ট্রিং (
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
() => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
setTitle()
chrome.browserAction.setTitle(
details: object,
callback?: function,
): Promise
ব্রাউজার অ্যাকশনের শিরোনাম সেট করে। এই শিরোনাম টুলটিপে প্রদর্শিত হবে।
পরামিতি
- যখন একটি নির্দিষ্ট ট্যাব নির্বাচন করা হয় তখন পরিবর্তন সীমিত করে। ট্যাব বন্ধ হয়ে গেলে স্বয়ংক্রিয়ভাবে রিসেট হয়।
- মাউস ওভার করার সময় ব্রাউজার অ্যাকশনটি যে স্ট্রিংটি প্রদর্শন করা উচিত।
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
() => void
রিটার্নস
- প্রতিশ্রুতি শুধুমাত্র ম্যানিফেস্ট V3 এর জন্য সমর্থিত এবং পরবর্তীতে, অন্যান্য প্ল্যাটফর্মকে কলব্যাক ব্যবহার করতে হবে।
ঘটনা
onClicked
chrome.browserAction.onClicked.addListener(
callback: function,
)
ব্রাউজার অ্যাকশন আইকনে ক্লিক করা হলে ফায়ার করা হয়। ব্রাউজার অ্যাকশনে পপআপ থাকলে ফায়ার হয় না।
পরামিতি
callbackপ্যারামিটারটি এর মতো দেখাচ্ছে:
(tab: tabs.Tab) => void