相关疑难解决方法(0)

我正在学习如何创建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视频时.

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

我一直在学习创建chrome扩展.我已经尝试过hello world示例,它工作正常.现在我一直在尝试添加自定义代码,并根据我的要求对hello world代码进行一些更改.

我想要创建的是当用户点击地址栏中的图标时,它应该打开地址栏下方的popup.html ,如图所示.截图来自扩展名为raindrop.io

他们正在进行chrome扩展.当我点击图标时,它会在现有网页顶部和地址栏下方打开右侧抽屉,以显示我保存的所有书签.我想达到同样的效果,但我不知道从哪里开始.我听说有一些实验性的侧窗格,但谷歌删除了它.

编辑

我已经采纳了这些建议,并试图实现这一点.现在我被困在两个地方 -

1. 单击地址栏中的图标时如何打开窗口.现在它只是自动打开.我想在用户点击图标时打开它.
2. 我正在做这一切来创建一个扩展的注释,我已经创建了一个笔记扩展,但它在弹出界面工作,但我想在侧边栏界面实现.

这是我的代码 -

A. Chrome扩展中的侧窗口界面

的manifest.json

    {
    "manifest_version": 2,

    "name": "Hello World",
    "description": "This extension to test html injection",
    "version": "1.0",
    "content_scripts": [{
        "run_at": "document_end",
        "matches": [
            "https://*/*",
            "http://*/*"
        ],
        "js": ["js/jquery-1.11.3.js", "js/content-script.js"],
        "css": ["css/custom.css"]
    }],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "permissions": [
        "activeTab",
        "https://ajax.googleapis.com/"
    ]
  }

内容Script.js

var iframe = document.createElement('iframe'); 
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "360px";
iframe.style.position = "fixed";
iframe.style.top = "0px"; …

每当我尝试使用该chrome.cookies.get()函数从cookie中读取时,我都会收到此错误:

TypeError: Cannot read property 'get' of undefined.

我在我的content.js文件中调用该函数,它只能在twitter.com上运行(该部分有效).

这是我的清单文件:

{
  "manifest_version": 2,

  "name": "Twitter-MultiSignin",
  "description": "twiter sign in",
  "version": "1.0",
  "permissions": [ "cookies", "alarms" , "http://*/*", "https://*/*", "storage"],
  "content_scripts": [{
    "matches": ["http://twitter.com/*","https://twitter.com/*"],
    "js": ["jquery.js","content.js"]
  }],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

这是我的content.js(它总是在twitter页面上提醒,以便工作正常):

$(function() {
    alert('got here');
    try{
        chrome.cookies.get({ url: 'https://twitter.com', name: 'auth_token' }, function (cookie){
            alert(cookie.value);
        });
    }catch(err){
        //do nothing
        alert(err);
    }
    try{
        chrome.cookies.get({ url: 'https://twitter.com', name: 'twid' },
        function (cookie) {
            if (cookie) { …

我正在尝试为浏览器的Web扩展测试示例代码.但是,它不起作用.我检查了控制台的谷歌浏览器和Firefox.它不打印任何东西.以下是我的代码:

manifest.json:

{
    "description": "Demonstrating webRequests",
    "manifest_version": 2,
    "name": "webRequest-demo",
    "version": "1.0",

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

background.js:

function logURL(requestDetails) {
    console.log("Loading: " + requestDetails.url);
}

chrome.webRequest.onBeforeRequest.addListener(
    logURL,
    {urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");

我错过了什么吗？

概述

我能够通过新的chrome.scriptingAPI成功注入我的 Javascript 脚本。

但是，我仍然无法window通过此注入的脚本访问页面的对象。

我尝试过的

回到 MV2，我曾经执行以下操作：

async function getWindow() {
    return new Promise(function (resolve, reject) {
      const script = document.createElement('script');
      script.text = `
            const _window = JSON.stringify(window);
            document.body.insertAdjacentHTML("beforebegin", "<div id='dummy' style='display:none;width:0;height:0;pointer-events:none;'>"+_window+"</div>")
        `;

      document.getElementsByTagName('head')[0].appendChild(script);

      const _window = document.getElementById('dummy');
      const data = JSON.parse(_window.innerText)

      script.remove();
      resolve(data);
    });
  }

 (async () => {
    const _window = await getWindow();
    console.log(_window)
  })();

但这已经不可能了。它给了我以下错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self'”。启用内联执行需要“unsafe-inline”关键字、哈希值（“sha256-iAKY8pCLpBsSPttuizEMbuFVrucrXcGUoo/RYdGQEyw=”）或随机数（“nonce-...”）。

基于该错误，我找到了这个答案和这个问题的答案，但它并没有解决我的问题，因为前者适用于 MV2，后者使用外部脚本。我看不到让它与本地脚本一起工作。

我想要实现的目标

我想window从我的 Chrome 扩展程序访问给定网站的对象。

其他注意事项

• 在我的清单中，我具有以下权限： …

即使在 manifest.json 中正确声明了“image/copy.svg”，我也会收到此错误

拒绝加载 chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg。资源必须在 web_accessible_resources 清单键中列出，以便由扩展程序之外的页面加载。

如果我去 chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg 我可以成功地看到加载的图像。

css/style.css

.copy-icon{
    content:url('chrome-extension://__MSG_@@extension_id__/images/copy.svg');
    height: 16px;
    width: auto;
    margin-right: 0px;
}

html

<button alt="Copy to clipboard" class="clipboard" data-clipboard-text="TEXT">
  <img class="copy-icon"></img>
</button> 

清单文件

    "manifest_version": 3,
    "content_scripts": [
    {
      "matches": ["https://*.example.com/*"], 
      "js": ["contents/results.js"],
      "css": ["css/style.css"],
      "run_at": "document_end"
    }
  ],
    "web_accessible_resources": [{
        "resources": ["images/copy.svg"],
        "matches": [],
       "extension_ids": []
      }],