标签: content-script

我正在学习如何创建Chrome扩展程序.我刚开始开发一个来捕捉YouTube活动.我想将它与YouTube Flash播放器一起使用(稍后我将尝试使其与HTML5兼容).

manifest.json的:

{
    "name": "MyExtension",
    "version": "1.0",
    "description": "Gotta catch Youtube events!",
    "permissions": ["tabs", "http://*/*"],
    "content_scripts" : [{
        "matches" : [ "www.youtube.com/*"],
        "js" : ["myScript.js"]
    }]
}

myScript.js:

function state() { console.log("State Changed!"); }
var player = document.getElementById("movie_player");
player.addEventListener("onStateChange", "state");
console.log("Started!");

问题是控制台给了我"开始!" ,但没有"状态改变!" 当我播放/暂停YouTube视频时.

将此代码放入控制台时,它可以正常工作.我究竟做错了什么？

所以,我有一个选项页面,用户可以在其中定义某些选项并将其保存在localStorage中: options.html

现在,我还有一个内容脚本需要获取options.html页面中定义的选项,但是当我尝试从内容脚本访问localStorage时,它不会从选项页面返回值.

如何让我的内容脚本从localStorage,选项页面甚至后台页面获取值？

我知道这个问题已经以不同的方式反复提出,但我试图通过所有的答案(希望我没有错过任何人),但没有一个对我有用.

这是我的扩展程序代码:

表现:

{
"name": "test",
"version": "1.1",
"background": 
{ 
    "scripts": ["contextMenus.js"]
},

"permissions": ["tabs", "<all_urls>", "contextMenus"],

"content_scripts" : [
    {
        "matches" : [ "http://*/*" ],
        "js": ["jquery-1.8.3.js", "jquery-ui.js"],
        "css": [ "jquery-ui.css" ],
        "js": ["openDialog.js"]
    }
],

"manifest_version": 2
}

contextMenus.js

function onClickHandler(info, tab) {
    if (info.menuItemId == "line1"){

      alert("You have selected: " + info.selectionText);

      chrome.extension.sendMessage({action:'open_dialog_box'}, function(){});

      alert("Req sent?");

    }
}

chrome.contextMenus.onClicked.addListener(onClickHandler);

chrome.runtime.onInstalled.addListener(function() {

  chrome.contextMenus.create({"id": "line1", "type": "normal", "title": "I'm line 1",     "contexts":["selection"]});

});

openDialog.js

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {

  if …

我试图让我的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, {code:"init();"});
});

//script.js
function init() {
    alert("It works!");
}

我也想知道init()函数是否可以访问其他JS文件中的其他函数？

安装或升级我正在处理的Chrome扩展程序后,不会重新注入内容脚本(在清单中指定),因此需要页面刷新才能使扩展能够正常工作.有没有办法强制脚本再次注入？

我相信我可以通过从清单中删除它们然后处理在后台页面中注入哪些页面来以编程方式再次注入它们,但这不是一个好的解决方案.

我不想自动刷新用户的标签,因为这可能会丢失一些数据.安装或升级扩展时,Safari会自动刷新所有页面.

一般的问题

你好!我正在钻研Chrome扩展程序的世界,并且在整体工作流程下降方面遇到了一些问题.似乎Google最近转而大力提倡事件页面,而不是将所有内容保存在background.js和background.html中.我参与其中的一部分意味着我们应该将大部分扩展逻辑传递给内容脚本.

在Google的Event Page入门中,他们有manifest.json文件中列出的内容脚本.但是在他们的事件页面示例扩展中,它是通过background.js中的这个代码块引入的:chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });

以一种方式做另一种方式有什么好处？

我的守则

我正在推进注入内容脚本的程序化方式,就像Google的例子一样.

的manifest.json

{
    "manifest_version": 2,
    "name": "Test",
    "description": "Let's get this sucker working",
    "version": "0.0.0.1",
    "permissions": [
        "tabs",
        "*://*/*"
    ],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_icon": "icon.png"
    }
}

background.js

chrome.browserAction.onClicked.addListener(function() {
    console.log("alert from background.js");
    chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
        console.log("jquery Loaded");
    });
    chrome.tabs.executeScript({file: "content.js"}, function() {
        console.log("content loaded");
    });
});

content.js

console.log('you\'r in the world of content.js');
var ans = {};

ans.createSidebar …

(这是在chrome扩展中使用内容脚本)

我需要覆盖网页标记为的一些css属性!important.这可能吗？

例如,如果我想摆脱标记为重要的边界:

$(".someclass").css('border','none'); //does not work

我正在尝试从JavaScript中注入我的CSS,它是作为内容脚本注入的:

"content_scripts": [
   {
      "matches": ["http://www.google.com/*"],
      "js": ["script.js"]
   }
],

我发现了关于注入CSS的类似问题,但是在使用来自已接受答案的代码时遇到了问题.这是我的script.js内容:

var link = document.createElement("link");
link.href = chrome.extension.getURL("style.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

加载某些页面后,此消息显示在控制台中:

拒绝加载chrome-extension://phkgaaiaakklogbhkdnpjncedlbamani/fix.css.资源必须列在web_accessible_resources清单键中,以便由扩展名外的页面加载.

有没有什么办法解决这一问题？或者,也许,从该JavaScript文件中注入一些CSS的其他方法？

注意:我不能直接从清单中包含样式表.

我正在开发一个"页面操作"谷歌浏览器扩展程序.我的清单有:

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

在我的background.js文件中,我有:

function doSomething() {
     alert("I was clicked!");
}

chrome.pageAction.onClicked.addListener(doSomething);

这有效.现在在我的doSomething函数中,我想读取当前页面上的一些数据.使用jquery读取数据会更容易,因此我可以轻松地定位我想要的确切数据.我如何合并jquery(最好是从谷歌的CDN服务),以便我的doSomething功能可以访问？

我的扩展应该加载一个内容脚本searchTopic.js,只有在它注入的页面已经完全加载之后(是的,我已经在扩展清单中将"run_at"设置为"document_end"),但实际上它在加载之前已经创建了所有DOM对象(关键的对象是通过页面中的一些Javascript创建的).所以,问题是,我怎么能等到页面的Javascript执行完毕？这是我的清单:

"content_scripts": [
  {
  "run_at": "document_end",
  "matches": ["https://groups.google.com/forum/*"],
  "js": ["searchTopic.js"]
  }
],