blocks|key|1130470|text|最简单的解决方案是在文件顶部添加以下代码。然后您可以像往常一样使用所有完整的Chrome+console+api。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1130471|+console+=+chrome.extension.getBackgroundPage().console;
//+for+instance,+console.assert(1!=1)+will+return+assertion+error
//+console.log("msg")+==>+prints+msg
//+etc|code-block|syntax|javascript|1130472|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/chrome-developer-tools/docs/console-api^0|12|I|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

The simplest solution would be to add the following code on the top of the file. And than you can use all full <a href="https://developers.google.com/chrome-developer-tools/docs/console-api" rel="noreferrer">Chrome console api</a> as you would normally.

<pre><code> console = chrome.extension.getBackgroundPage().console;
// for instance, console.assert(1!=1) will return assertion error
// console.log("msg") ==&gt; prints msg
// etc
</code></pre>

blocks|key|915793|text|为了直接回答您的问题，当您从后台调用console.log("something")时，会将此消息记录到后台页面的控制台。要查看它，您可以转到chrome://extensions/，然后单击您的扩展下的该inspect+view。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|915794|单击弹出窗口时，会将其加载到当前页面中，因此console.log应该会在当前页面中显示日志消息。|915795|entityMap^0|I|O|1Z|K|2V|C|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

To answer your question directly, when you call <code>console.log("something")</code> from the background, this message is logged, to the background page's console. To view it, you may go to <code>chrome://extensions/</code> and click on that <code>inspect view</code> under your extension.

When you click the popup, it's loaded into the current page, thus the console.log should show log message in the current page.

blocks|key|1130590|text|您仍然可以使用console.log()，但它会登录到一个单独的控制台中。要查看它-右击扩展图标并选择“检查弹出窗口”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130591|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can still use console.log(), but it gets logged into a separate console.
In order to view it - right click on the extension icon and select "Inspect popup".

blocks|key|915873|text|如果您想要登录到活动页面的控制台，请尝试此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|915874|chrome.tabs.executeScript({
++++code:+'console.log("addd")'
});|code-block|syntax|javascript|915875|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this, if you want to log to the active page's console:

<pre><code>chrome.tabs.executeScript({
 code: 'console.log("addd")'
});
</code></pre>

blocks|key|915922|text|这是一个老帖子，已经有了很好的答案，但我补充了我的两点。我不喜欢使用console.log，我更喜欢使用记录到控制台或任何我想要的地方的记录器，所以我有一个模块，它定义了一个类似下面的日志函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|915923|function+log(...args)+{
++console.log(...args);
++chrome.extension.getBackgroundPage().console.log(...args);
}|code-block|syntax|javascript|915924|当我调用log("this+is+my+log")时，它将在弹出控制台和后台控制台中写入消息。|915925|这样做的好处是能够在不更改代码的情况下更改日志的行为(如禁用生产日志等)。|915926|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

It's an old post, with already good answers, but I add my two bits. I don't like to use console.log, I'd rather use a logger that logs to the console, or wherever I want, so I have a module defining a log function a bit like this one

<pre><code>function log(...args) {
 console.log(...args);
 chrome.extension.getBackgroundPage().console.log(...args);
}
</code></pre>

When I call log("this is my log") it will write the message both in the popup console and the background console.

The advantage is to be able to change the behaviour of the logs without having to change the code (like disabling logs for production, etc...)

blocks|key|1130771|text|要从后台页面获取控制台日志，您需要在后台页面background.js中编写以下代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130772|+chrome.extension.getBackgroundPage().console.log('hello');|code-block|syntax|javascript|1130773|然后加载扩展并检查其背景页面以查看控制台日志。|1130774|去吧！！|1130775|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To get a console log from a background page you need to write the following code snippet in your background page background.js -
<pre><code> chrome.extension.getBackgroundPage().console.log('hello');
</code></pre>
Then load the extension and inspect its background page to see the console log.
Go ahead!!

blocks|key|1130805|text|要在调试您的chrome扩展时查看控制台，您应该使用chrome.extension.getBackgroundPage();应用程序接口，之后您可以像往常一样使用console.log()：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1130806|chrome.extension.getBackgroundPage().console.log('Testing');|code-block|syntax|javascript|1130807|当您使用多次时，这是很好的，因此您可以创建自定义函数：|1130808|++const+console+=+{
++++log:+(info)+=>+chrome.extension.getBackgroundPage().console.log(info),
++};
++console.log("foo");|1130809|你只需要在任何地方使用console.log('learnin')|1130810|entityMap^0|Q|11|2A|D|0|0|0|0|B|M|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

To view console while debugging your chrome extension, you should use the <code>chrome.extension.getBackgroundPage();</code> API, after that you can use <code>console.log()</code> as usual:
<pre><code>chrome.extension.getBackgroundPage().console.log('Testing');
</code></pre>
This is good when you use multiple time, so for that you create custom function:
<pre><code> const console = {
 log: (info) =&gt; chrome.extension.getBackgroundPage().console.log(info),
 };
 console.log(&quot;foo&quot;);
</code></pre>
you only use <code>console.log('learnin')</code> everywhere

blocks|key|916065|text|目前，使用Manifest3和service+worker，您只需转到Extensions+Page+/+Details并单击Inspect+Views+/+Service+Worker。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|916066|entityMap^0|Z|P|1R|U|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Curently with Manifest 3 and service worker, you just need to go to <code>Extensions Page / Details</code> and just click <code>Inspect Views / Service Worker</code>.

If I call <code>console.log('something');</code> from the popup page, or any script included off that it works fine.

However as the background page is not directly run off the popup page it is not included in the console.

Is there a way that I can get <code>console.log()</code>'s in the background page to show up in the console for the popup page?

is there any way to, from the background page call a function in the popup page?

google chrome extension :: console.log() from background page?

如果我从弹出页面调用console.log('something');，或者任何包含的脚本，它都工作得很好。但是，由于后台页面不是直接从弹出页面运行的，所以它不包含在控制台中。有没有办法让后台页面中的console.log()显示在弹出页面的控制台中？有没有办法从后台页面调用弹出页面中的函数？

问谷歌chrome扩展:：console.log()从后台页面？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌chrome扩展:：console.log()从后台页面？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌chrome扩展:：console.log()从后台页面？
EN