ক্রোম এক্সটেনশনে কীভাবে jQuery ব্যবহার করবেন?

Question

আমি ক্রোম এক্সটেনশন লিখছি। এবং আমি jQueryআমার এক্সটেনশনে ব্যবহার করতে চাই । আমি কোনও ব্যাকগ্রাউন্ড পৃষ্ঠা ব্যবহার করছি না , কেবল একটি ব্যাকগ্রাউন্ড স্ক্রিপ্ট ।

আমার ফাইলগুলি এখানে:

manifest.json

{
    "manifest_version": 2,

    "name": "Extension name",
    "description": "This extension does something,",
    "version": "0.1",

    "permissions": [
        "activeTab"
    ],

    "browser_action": {
        "default_icon": "images/icon_128.png"
    },

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    "icons": {
        "16": "images/icon_16.png",
        "48": "images/icon_48.png",
        "128": "images/icon_128.png"
    }
}

আমার background.jsফাইল সবেমাত্র নামের একটি ফাইল চালায়work.js

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

আমার এক্সটেনশনের মূল যুক্তিটি ভিতরে work.js। যে বিষয়বস্তুগুলি আমি এখানে এই প্রশ্নের জন্য গুরুত্বপূর্ণ মনে করি না।

আমি যা জানতে চাই তা হ'ল আমি কীভাবে আমার এক্সটেনশনে jQuery ব্যবহার করতে পারি। যেহেতু আমি কোনও ব্যাকগ্রাউন্ড পৃষ্ঠা ব্যবহার করছি না। আমি এটিতে কেবল jQuery যুক্ত করতে পারি না। তাহলে আমি কীভাবে আমার এক্সটেনশনে jQuery যুক্ত এবং ব্যবহার করতে পারি?

আমি background.jsফাইল থেকে আমার work.js সহ jQuery চালানোর চেষ্টা করেছি ।

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-2.0.3.js'
    });
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

এবং এটি সূক্ষ্মভাবে কাজ করে, তবে আমার উদ্বেগ হচ্ছে যে এইভাবে সম্পাদিত হওয়া লিপিগুলি সংবিধানে কার্যকর করা হচ্ছে কিনা। যদি হ্যাঁ হয় তবে এমনটি ঘটতে পারে যে work.js jQuery এর আগেও চলে (বা অন্যান্য গ্রন্থাগার যা আমি ভবিষ্যতে যুক্ত করতে পারি)।

এবং আমি আমার ক্রোম এক্সটেনশনে তৃতীয় পক্ষের লাইব্রেরিগুলি ব্যবহার করার সঠিক ও সর্বোত্তম উপায় কী তা জানতে চাই।

Comments

সঠিক উপায় ভ্যানিলা যেতে!

— বিজেবি 568 0

আপনি যদি এখানে কীভাবে পপ-আপ এক্সটেনশনে (যেমন আমি ছিলেন) jQuery যুক্ত করবেন তা সন্ধান করছেন, এই প্রশ্নটি দেখুন: stackoverflow.com/questions/12035242/…

— প্রো কিউ

Answer 1

আপনাকে আপনার ক্রোম-এক্সটেনশন প্রকল্পে এবং backgroundআপনার ম্যানিফেস্টের অংশে আপনার jquery স্ক্রিপ্ট যুক্ত করতে হবে have

  "background":
    {
        "scripts": ["thirdParty/jquery-2.0.3.js", "background.js"]
    }

আপনার যদি একটি কন্টেন্ট_স্ক্রিপ্টে jquery দরকার হয় তবে আপনাকে এটি ম্যানিফেস্টেও যুক্ত করতে হবে:

"content_scripts": 
    [
        {
            "matches":["http://website*"],
            "js":["thirdParty/jquery.1.10.2.min.js", "script.js"],
            "css": ["css/style.css"],
            "run_at": "document_end"
        }
    ]

এটাই আমি করেছি।

এছাড়াও, যদি আমি সঠিকভাবে স্মরণ করি তবে পটভূমি স্ক্রিপ্টগুলি যে পটভূমি উইন্ডোটি দিয়ে আপনি খুলতে পারেন তাতে সম্পাদন করা হয় chrome://extensions।

Comments

আচ্ছা আপনি আসলে কি বলতে চাইছেন You have to add your jquery script to your chrome-extension project? আমি এটি করেছি: manifest.json: "background": { `" স্ক্রিপ্টস ": [" তৃতীয় পক্ষ / jquery-2.0.3.js "," ব্যাকগ্রাউন্ড.js "], pers pers" অবিরাম ": মিথ্যা`}, `এবং আমি ডাউনলোড করেছি তৃতীয় পক্ষের ফোল্ডারে jQuery। তবে আমি এখনও jQuery ব্যবহার করতে পারি না। এটি ত্রুটি দেয়: Uncaught ReferenceError: $ is not defined আমি এটি work.jsপরীক্ষার জন্য আমার ফাইলে যুক্ত করেছি । $("body").html("Foo!");

— hanশান

উপরের মন্তব্যটি একটি জগাখিচুড়ি মনে হলেও মন্তব্য যুক্ত করার সময় পূর্বরূপ প্রদর্শিত হবে না। তার জন্য আমাকে ক্ষমা করুন।

— hanশান

আমি এটি আপনার ক্রোম-এক্সটেনশন ফোল্ডারে যুক্ত করতে চাইছি। পছন্দ করুন আপনার work.js. এর সাথে আপনার একই কাজ করা উচিত

— নিকো

আপনি যা বলেছিলেন তা করার চেষ্টা করেছি। তবে আমি এখনও আমার work.jsফাইল থেকে jquery অ্যাক্সেস করতে না পারার একই ত্রুটি পাচ্ছি । Uncaught ReferenceError: $ is not defined। আপনি যদি পারেন তবে দয়া করে কোথাও কোনও কাজের উদাহরণ আপলোড করতে পারেন। '$ ("বডি") করার মতো একটি সাধারণ উদাহরণ h html ("ফু!");' work.js. এ

— ইসহান

আমার স্বীকৃতি পেতে jQueryবা পেতে সমস্যা ছিল $। দেখা গেল আমি ম্যাকিফেস্ট অ্যারেতে শেষবার jQuery উল্লেখ করছি। আমি যখন এটি প্রথম রাখি তখন এটি স্বীকৃত ছিল।

— বেনআর

Answer 2

এটি খুব সহজ কেবল নিম্নলিখিতটি করুন:

আপনার মেনিফেস্ট.জসনে নিম্নলিখিত লাইনটি যুক্ত করুন

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

এখন আপনি সরাসরি ইউআরএল থেকে jQuery লোড করতে পারেন

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

সূত্র: গুগল ডক

Comments

আপনার যদি লোড করার জন্য একাধিক স্ক্রিপ্ট থাকে?

— অন্য

দুর্দান্ত স্ক্রিনটি যদি আপনি কোনও স্ক্রিনটি কোনও দূরবর্তী সার্ভার থেকে লোড করতে চান (যার পক্ষে কার্যকরভাবে আপনার প্রয়োজন হয় যে আপনি আপনার এক্সটেনশান এবং এটিতে অ্যাক্সেস রয়েছে এমন সমস্ত কিছু দিয়ে দূরবর্তী সার্ভারকে বিশ্বাস করুন)।

— নাথানিয়েল ভারহারেন

@ নাথানিয়েলভেরহরেন এটি উত্থাপনের পক্ষে যুক্তিসঙ্গত বিষয়, তবে উত্সটি যাচাই করে subresource integrity(এসআরআই) এটি প্রশমিত করা যেতে পারে ।

— ড্যান অ্যাটকিনসন

Answer 3

এবং এটি সূক্ষ্মভাবে কাজ করে, তবে আমার উদ্বেগ হচ্ছে যে এইভাবে সম্পাদিত হওয়া লিপিগুলি সংবিধানে কার্যকর করা হচ্ছে কিনা। যদি হ্যাঁ হয় তবে এমনটি ঘটতে পারে যে work.js jQuery এর আগেও চলে (বা অন্যান্য লাইব্রেরি যা আমি ভবিষ্যতে যুক্ত করতে পারি)।

এটি সত্যিই উদ্বেগের বিষয় হওয়া উচিত নয়: আপনি কোনও নির্দিষ্ট জেএস প্রসঙ্গে কার্যকর করতে স্ক্রিপ্টগুলি সারি করুন এবং সেই প্রসঙ্গটির রেস শর্ত থাকতে পারে না কারণ এটি একক থ্রেডযুক্ত।

তবে এই উদ্বেগ দূর করার সঠিক উপায় হ'ল কলগুলি শৃঙ্খলাবদ্ধ:

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-2.0.3.js'
    }, function() {
        // Guaranteed to execute only after the previous script returns
        chrome.tabs.executeScript({
            file: 'work.js'
        });
    });
});

বা, সাধারণীকরণ:

function injectScripts(scripts, callback) {
  if(scripts.length) {
    var script = scripts.shift();
    chrome.tabs.executeScript({file: script}, function() {
      if(chrome.runtime.lastError && typeof callback === "function") {
        callback(false); // Injection failed
      }
      injectScripts(scripts, callback);
    });
  } else {
    if(typeof callback === "function") {
      callback(true);
    }
  }
}

injectScripts(["thirdParty/jquery-2.0.3.js", "work.js"], doSomethingElse);

বা, প্রতিশ্রুতিবদ্ধ (এবং যথাযথ স্বাক্ষরের সাথে তাল মিলিয়ে আরও কিছু এনেছে):

function injectScript(tabId, injectDetails) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, injectDetails, (data) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError.message);
      } else {
        resolve(data);
      }
    });
  });
}

injectScript(null, {file: "thirdParty/jquery-2.0.3.js"}).then(
  () => injectScript(null, {file: "work.js"})
).then(
  () => doSomethingElse
).catch(
  (error) => console.error(error)
);

বা, কেন হ্যাক নয়, async/ await-এমনকি এমনকি আরও পরিষ্কার সিনট্যাক্সের জন্য:

function injectScript(tabId, injectDetails) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, injectDetails, (data) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError.message);
      } else {
        resolve(data);
      }
    });
  });
}

try {
  await injectScript(null, {file: "thirdParty/jquery-2.0.3.js"});
  await injectScript(null, {file: "work.js"});
  doSomethingElse();
} catch (err) {
  console.error(err);
}

দ্রষ্টব্য, ফায়ারফক্সে আপনি ঠিক এটি ব্যবহার করতে পারবেন এটি browser.tabs.executeScriptকোনও প্রতিশ্রুতি ফিরিয়ে দেবে।

Comments

প্রথম পদ্ধতি উজ্জ্বল। যিনি বেশি জাভাস্ক্রিপ্ট জানেন না এমন হিসাবে আমি কখনও এর মতো কিছু বিবেচনা করি নি।

— ফ্রিস্কি সাগা

Answer 4

ইতিমধ্যে উল্লিখিত সমাধানগুলি বাদে আপনি ডাউনলোডও করতে পারেন jquery.min.js স্থানীয়ভাবে এবং তারপরে এটি ব্যবহার করতে পারেন -

ডাউনলোড করার জন্য -

wget "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"

manifest.json -

"content_scripts": [
   {
    "js": ["/path/to/jquery.min.js", ...]
   }
],

এইচটিএমএল -

<script src="/path/to/jquery.min.js"></script>

রেফারেন্স - https://developer.chrome.com/extensions/contentSecurityPolicy

Comments

এটি সেরা উপায় ... আপনার এইচটিএমএল অংশের দরকার নেই।

— সি-

Answer 5

আমার ক্ষেত্রে ক্রস-ডকুমেন্ট মেসেজিং (এক্সডিএম) এবং পৃষ্ঠা লোডের পরিবর্তে ক্রোম এক্সটেনশান অনক্লিকের মাধ্যমে একটি কার্যকর সমাধান পেয়েছে।

manifest.json টি

{
  "name": "JQuery Light",
  "version": "1",
  "manifest_version": 2,

  "browser_action": {
    "default_icon": "icon.png"
  },

  "content_scripts": [
    {
      "matches": [
        "https://*.google.com/*"
      ],
      "js": [
        "jquery-3.3.1.min.js",
        "myscript.js"
      ]
    }
  ],

  "background": {
    "scripts": [
      "background.js"
    ]
  }

}

background.js

chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

myscript.js

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.message === "clicked_browser_action") {
        console.log('Hello world!')
        }
    }
);