Chrome扩展程序代码与内容脚本与注入脚本 [英] Chrome extension code vs Content scripts vs Injected scripts

问题描述

我试图让我的Chrome扩展程序在加载新页面时运行函数 init（），但我无法理解如何执行此操作。根据我的理解，我需要在background.html中执行以下操作：

1. 使用 chrome.tabs.onUpdated .addListener（）检查页面何时更改
   


2. 使用 chrome.tabs.executeScript 运行脚本。

这是我的代码：

  // background.html 
 chrome.tabs.onUpdated.addListener（function（tabId，changeInfo，tab）{
 chrome.tabs.executeScript（null，{代码：init（）;}）; 
}）; 
 
 //script.js 
函数init（）{
 alert（It works！）; 
 
  

我也想知道init（）函数是否可以访问我的其他功能位于其他JS文件？

解决方案

Chrome扩展中的JavaScript代码可以分为以下几种分组：

• 扩展代码 - 完全访问所有允许的 chrome。* API。
  
  这包括后台页面以及可通过 chrome.extension.getBackgroundPage（） ，例如浏览器弹出窗口。




• 内容脚本（通过清单文件或 chrome.tabs.executeScript ） - 部分访问某些 chrome API ，可以完全访问页面的DOM（ not ）到任何窗口对象，包括框架）。
  
  Content脚本在扩展和页面之间的范围内运行。内容脚本的全局窗口对象不同于页面/扩展的全局名称空间。




• 注入脚本（通过此方法） - 完全访问页面中的所有属性。 不能访问任何 chrome。* API。
  
  注入脚本的行为就好像它们被页面本身包含，并且没有以任何方式连接到扩展。请参阅此帖子了解更多关于各种注射方法的信息。
  
  
  

  要将注入脚本的消息发送到内容脚本，必须使用事件。有关示例，请参阅此答案。注意：在从一个上下文到另一个上下文的扩展中传输的消息是自动 - 串行化和解析。
  
  

  ---

  
  
  

  就你而言，后台页面中的代码（ chrome.tabs.onUpdated ）可能在内容脚本 script.js 被评估之前调用。因此，您将得到 ReferenceError ，因为 init 不是。

  
  
  

  另外，当您使用 chrome.tabs.onUpdated 时，请确保您测试页面是否完全加载，因为事件触发两次：加载之前，并在完成：
  
  

    // background.html 
   chrome.tabs.onUpdated.addListener（function（tabId，changeInfo ，tab）{
   if（changeInfo.status =='complete'）{
   //当页面完全准备就绪（DOM）时执行一些脚本
   chrome.tabs.executeScript（null， {code：init（）;}）; 
  } 
  }）; 
    

  
  

  I am trying to get my Chrome Extension to run the function init() whenever a new page is loaded, but I am having trouble trying to understand how to do this. From what I understand, I need to do the following in background.html:

  1. Use chrome.tabs.onUpdated.addListener() to check when the page is changed
  2. Use chrome.tabs.executeScript to run a script.

  This is the code I have:

  //background.html
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      chrome.tabs.executeScript(null, {code:"init();"});
  });
  
  //script.js
  function init() {
      alert("It works!");
  }
  

  I am also wondering if the init() function will have access to my other functions located in other JS files?

  解决方案

  JavaScript code in Chrome extensions can be divided in the following groups:

  • Extension code - Full access to all permitted chrome.* APIs.
    This includes the background page, and all pages which have direct access to it via chrome.extension.getBackgroundPage(), such as the browser pop-ups.

  • Content scripts (via the manifest file or chrome.tabs.executeScript) - Partial access to some of the chrome APIs, full access to the page's DOM (not to any of the window objects, including frames).
    Content scripts run in a scope between the extension and the page. The global window object of a Content script is distinct from the page/extension's global namespace.

  • Injected scripts (via this method in a Content script) - Full access to all properties in the page. No access to any of the chrome.* APIs.
    Injected scripts behave as if they were included by the page itself, and are not connected to the extension in any way. See this post to learn more information on the various injection methods.

  To send a message from the injected script to the content script, events have to be used. See this answer for an example. Note: Message transported within an extension from one context to another are automatically (JSON)-serialised and parsed.

  ---

  In your case, the code in the background page (chrome.tabs.onUpdated) is likely called before the content script script.js is evaluated. So, you'll get a ReferenceError, because init is not .

  Also, when you use chrome.tabs.onUpdated, make sure that you test whether the page is fully loaded, because the event fires twice: Before load, and on finish:

  //background.html
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      if (changeInfo.status == 'complete') {
          // Execute some script when the page is fully (DOM) ready
          chrome.tabs.executeScript(null, {code:"init();"});
      }
  });
  

  这篇关于Chrome扩展程序代码与内容脚本与注入脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！