อะไรคือหนทางที่ดีที่สุดที่จะเรียกว่าเนื้อหาภายในสคริปต์'ฟังก์ชันอกจากพื้นหลังของสคริปต์อยู่ในไฟร์ฟอกซ์ name ส่วนขยาย?

Question 1

ฉันอยากจะโทรเรียกฟังก์ชันนั่นคือการจัดเตรียมไว้อยู่ในเนื้อหาภายในสคริปต์ของส่วนขยายนั้นจะได้รับข้อความที่เลือกไว้จาก webpages จากฟังก์ชันเบื้องหลังสคริปต์นั่นมันจะเป็นทีหลังเรียกเป็นผู้ฟังที่เชื่อมต่อไปเป็นรายการเมนู.

มันเป็นไปได้และสิ่งที่จะเป็นห่านทางที่จะทำมัน?

นี่คือที่เกี่ยวข้องชิ้นส่วนต่างๆของรหัส:

รายการlanguage

 "background": {
    "scripts": ["background.js"]
  },
  
  "content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }
]

content.js

var text = "";
    
function highlightedText() {
  text = content.getSelection();
}

background.js

function listenerFunction() {

    highlightedText();
    
    /* Doing various stuff that have to use the text variable */
  }
  
    browser.menus.onClicked.addListener((info, tab) => {
    highlightedText();
  });

อย่างที่เห็นกันอยู่ว่าห้องด้านบนรหัสไม่ได้ทำงานที่"เน้น"ฟังก์ชันตอนนี้มองเห็นได้จากพื้นหลังของสคริปต์

แล้วอะไรที่เร็วสุด/ห่าวิธีที่จะทำให้รหัสทำงาน?

Question 2

โอเค. ฉันต้องเปลนี่มาจากหนึ่งของส่วนตัวของฉันขยายแฟ้มแต่ gist นี้คือ:

ในเบื้องหลังสคริปต์ตั้งค่าคิดถึงรายการอาหารและกำหนดเป็นงานที่ onclick อุปกรณ์ประกอบ:

browser.menus.create({
  id: 'images',
  title: 'imageDownload',
  contexts: ['all'],
  onclick: downloadImages
}, onCreated);

ยังคงอยู่ในที่เดียวกับสคริปต์ไปที่แท็บปัจจุบันข้อมูลและส่งข้อความไปยังเนื้อหาสคริปต์

function getCurrentTab() {
  return browser.tabs.query({ currentWindow: true, active: true });
}

async function downloadImages() {
  const tabInfo = await getCurrentTab();
  const [{ id: tabId }] = tabInfo;
  browser.tabs.sendMessage(tabId, { trigger: 'downloadImages' });
}

เนื้อหาสคริปต์ฟังสำหรับข้อความ:

browser.runtime.onMessage.addListener(({ trigger }) => {
  if (trigger === 'downloadImages') doSomething();
});

และทันทีที่การประมวลผลเสร็จแล้วส่งข้อความใหม่กลับไปที่พื้นหลังของสคริปต์

function doSomething() {
  const data = [1, 2, 3];
  browser.runtime.sendMessage({ trigger: 'downloadImages', data });
}

และแยกเป็นพื้นหลังของสคริปต์ฉันมีบางอย่างเหมือนต่อไปนี้:

browser.runtime.onMessage.addListener(function (data) {
  const { trigger } = data;
  if (trigger === 'downloadImages') ...
});

Andy · Answer 1 · 2021-10-29T12:40:02

โอเค. ฉันต้องเปลนี่มาจากหนึ่งของส่วนตัวของฉันขยายแฟ้มแต่ gist นี้คือ:

ในเบื้องหลังสคริปต์ตั้งค่าคิดถึงรายการอาหารและกำหนดเป็นงานที่ onclick อุปกรณ์ประกอบ:

browser.menus.create({
  id: 'images',
  title: 'imageDownload',
  contexts: ['all'],
  onclick: downloadImages
}, onCreated);

ยังคงอยู่ในที่เดียวกับสคริปต์ไปที่แท็บปัจจุบันข้อมูลและส่งข้อความไปยังเนื้อหาสคริปต์

function getCurrentTab() {
  return browser.tabs.query({ currentWindow: true, active: true });
}

async function downloadImages() {
  const tabInfo = await getCurrentTab();
  const [{ id: tabId }] = tabInfo;
  browser.tabs.sendMessage(tabId, { trigger: 'downloadImages' });
}

เนื้อหาสคริปต์ฟังสำหรับข้อความ:

browser.runtime.onMessage.addListener(({ trigger }) => {
  if (trigger === 'downloadImages') doSomething();
});

และทันทีที่การประมวลผลเสร็จแล้วส่งข้อความใหม่กลับไปที่พื้นหลังของสคริปต์

function doSomething() {
  const data = [1, 2, 3];
  browser.runtime.sendMessage({ trigger: 'downloadImages', data });
}

และแยกเป็นพื้นหลังของสคริปต์ฉันมีบางอย่างเหมือนต่อไปนี้:

browser.runtime.onMessage.addListener(function (data) {
  const { trigger } = data;
  if (trigger === 'downloadImages') ...
});

มีคนน้อยgetCurrent()ใช้งานในพื้นหลังของสคริปต์ในของคุณรหัสหรอ? ฉันได้ Uncaught(อยู่ในสัญญา)TypeError:tabInfo คือทำดัชนีเทียบสี ผิดพลาด ผมอ่านเจอใน แท็บ.getCurrent() เอกสาร: ข้อควรจำ: ฟังก์ชันนี้มีประโยชน์ใน contexts อยู่ไหนนั่นเป็นเบราว์เซอร์แท็บอย่างเช่นกาตัวเลือกหน้า. ถ้าคุณเรียกมันมาจากพื้นหลังของสคริปต์หรือแบบผุดขึ้นมันจะต้องกลับมา undefined.
ของส่วนขยายจะไม่ทำงานถ้ามันไม่ได้ ขอรหัสเป็นเพียงตัวอย่างว่ามันควรจะทำงานและนั่นทำงานกับของพื้นหลังของสคริปต์ สิ่งที่ข้อมูลของคุณเริ่มจาก tabs.getCurrent()?
@Costas ฉันเพิ่มนิดหน่อยของฉันรหัสนั่นมันหายไป(ง getCurrentTab ฟังก์ชัน). หวังว่านั่นจะช่วยได้
ฉันกำลั undefined เห็นได้ชัดว่าเพราะ tabs.getCurrent() กำลังเดินทางกลับ undefined. รหัสของคุณซ่อนข้อผิดพลาด ตอนนี้ฉันกำลังจะเป็น Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist จากบรรทัดของรหัส: browser.tabs.sendMessage(tabId, { trigger: 'downloadImages' }); ฉันมีรหัส: browser.runtime.onMessage.addListener(({ trigger }) => { if (trigger === 'downloadImages') doSomething(); }); อยู่ในเนื้อหาภายในสคริปต์แต่เห็นได้ชัดว่ามันยังไม่เห็นจากเบื้องหลังสคริปต์
คุณเคยถามสำหรับเป็นตัวอย่างผมให้คุณครั้งหนึ่ง มันจะก่อให้เกิดความรู้พื้นฐานเรื่องส่งข้อความซึ่งเป็นสิ่งที่คุณชอบเธอเหมือนกัน นี่รหัสอาจจะไม่เหมาะของความต้องการเป็นพิเศษ-คุณแค่ต้องทำงานไปรอบๆเล็กน้อยต้องเข้ารหัสของคุณ. อย่าเพิ่งยกรหัสจากนี้ตอบและหวังว่ามันจะใช้งานได้ คิดถึงคุณสามารถปรับเปลี่ยนรหัสที่เหมาะกับความต้องการของคุณ.
ฉันเพิ่งดูที่นามสกุลอีกไม่กี่นาทีก่อน...ในตัวดีบัใน Devtools ฉันเห็นมันเพียงพื้นหลังของสคริปต์ได้โหลด! ดังนั้นนั่นคือปัญหา เนื้อหาสคริปต์จะไม่โหลดทั้งหมด ฉันไม่เข้าใจว่าทำไมถึงอย่างที่ฉันมองไม่เห็นรับทราบแล้วคาย่ามีปัญหาอะไรอยู่ใน manifest.json แฟ้ม

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่